Burger mobile menu

CSS: Show hide div without JavaScript

Piotr Elmanowski Piotr Elmanowski | Published: 22 Feb, 2017

Sometimes you are not able to use JavaScript but you want to show and hide some div. It is possible, and very easy! You must create 3 elements:

  • input – checkbox with id, eg. “trigger”
  • label – we treat it as toggle button
  • box – simple div

Input checkbox must be placed just before the box. Label can be placed where you want.

Then you must use css trick with “+” selector. Label with attribute “for” checks/unchecks input checkbox, and below css rule switch visibility of box. hide input checkbox by display: none.

As result you should have something like below:

css show hide div without javascriptcss show hide div without javascript

Of course, at the end you should hide input checkbox by display: none; in CSS.

Basing on this method you can create eg. dropdown menu without JavaScript.

Tags: , , ,

Scroll top
Zdjęcie w lewo Zdjęcie w prawo