CSS: Show hide div without JavaScript
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.
1 2 3 4 5 6 7 8 |
<label for="trigger">Toggle box</label> <div> OTHER HTML CONTENT </div> <input id="trigger" type="checkbox"> <div class="box"> SHOW / HIDE BOX </div> |
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.
1 2 3 4 5 6 7 8 9 |
.box { display: none; background: #ccc; width: 200px; height: 100px; } #trigger:checked + .box { display: block; } |
As result you should have something like below:
Of course, at the end you should hide input checkbox by display: none; in CSS.
1 2 3 |
#trigger { display: none; } |
Basing on this method you can create eg. dropdown menu without JavaScript.