css

SHOW/HIDE a div when checkbox is checked using CSS only

Here is the code example that can be used to show a div when the checkbox is checked and hide the div when the checkbox is unchecked. We are implementing this functionality using CSS only.

.div_box {
    border: 1px solid #aaa;
    padding: 10px;
    display: none;
}

.checkbox:checked + .div_box {
    display: block;
}

The CSS code can be used to show/hide a div on checkbox check/uncheck. we are using pseudo-class :checked applied on the checkbox to check whether a checkbox is checked or not and using + keyword we are selecting the next HTML element of the input type checkbox that is a div.

Full Code Example

<input type="checkbox" class="checkbox">

<div class="div_box">
  Show me when the checkbox is checked and hide me when the checkbox is unchecked.
</div>

<style>
  .div_box {
    border: 1px solid #aaa;
    padding: 10px;
    display: none;
  }

  .checkbox:checked + .div_box {
    display: block;
  }
</style>

Output

Show or hide a div on checkbox checked CSS

Live Demo

Was this helpful?