CSS: Show hide div without JavaScript

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.

<label for="trigger">Toggle box</label>
<div>
    OTHER HTML CONTENT
</div>
<input id="trigger" type="checkbox">
<div class="box">
  SHOW / HIDE BOX
</div>

<label for="trigger">Toggle box</label>

<div>

OTHER HTML CONTENT

</div>

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.

.box {
  display: none;
  background: #ccc;
  width: 200px;
  height: 100px;
}
#trigger:checked + .box {
  display: block;
}

.box {

display: none;

background: #ccc;

width: 200px;

height: 100px;

}

#trigger:checked + .box {

display: block;

}

As result you should have something like below:

css show hide div without javascript

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

#trigger {
  display: none;
}

#trigger {

display: none;

}

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

Tags: cell, css, table, word-wrap