jQuery: Show or hide DIV-Container depending on Checkbox State

In this tutorial I will show you how to achieve that a DIV container is displayed or hidden depending on the state of a checkbox by using HTML, CSS and a little bit of JavaScript respectively jQuery code.

First of all, let us have a look at the HTML for the small example, on which I would like to demonstrate the method:

HTML

We have a checkbox and under this checkbox, there is a DIV container. First of all, this DIV container is invisible (display: none). However - as soon as we are selecting the checkbox, the DIV should be displayed (and be hidden again when we deactivate the checkbox again).

<label><input type="checkbox" id="cb_show"> Show DIV</label>

<div id="div_show" style="display: none">
   This content should be displayed
</div>

To be able to address our checkbox and the DIV via JavaScript and jQuery, we have assigned the IDs "cb_show" and "div_show" to them.

Of course, these names can be adapted to your own taste and use. We also need different names for each element if we have multiple DIV containers and checkboxes that are to be used independently on the same page (more on that later).

JavaScript/jQuery

Now we only need the jQuery code that should change the visibility of the DIV depending on the condition of the checkbox:

if ($('#cb_show').is(:checked)) {
   $('#div_show').show();
} else {
   $('#div_show').hide();
}

In the first line, we check, whether our checkbox "cb_show" is checked. If so, "div_show" will be displayed with ".show()", if not, it will be hidden with .hide().

Another possibility is using this code instead:

$('#cb_show').click(function(){
   $('#div_show').toggle(this.checked);
});

The first possibility can nevertheless be the better choice, if we would like to add other functions depending on the state of the checkbox, which can be inserted easily in the code of the individual conditions this way.

Multiple DIV Containers on one Page

The example described so far in this tutorial demonstrates showing and hiding a single DIV container. However, if we want to independently control multiple DIV containers with multiple checkboxes on the same page, we need to make some adjustments.

First of all, our DIV containers need unique IDs so that they can be addressed individually. Furthermore, it is more economical to write only one function that can be called for each DIV instead of having a separate function for each DIV. For this reason, in the next example, we gave all checkboxes for controlling the visibility the class "cb_show" (which is now to be used to assign the function) and introduced the attribute "data-div" (in which the ID  of the associated container is stored).

This results in the following adjusted HTML:

<label><input type="checkbox" class="cb_show" data-div="1"> Show DIV 1</label>
<label><input type="checkbox" class="cb_show" data-div="2"> Show DIV 2</label>

<div id="div_show1" style="display: none">
  Content of the first container
</div>

<div id="div_show2" style="display: none">
  Content of the second container
</div>

An adaptation of the jQuery code for this HTML example could look like this:

$('.cb_show').click(function(){
   var div = $(this).data("div");
   $('#div_show'+div).toggle(this.checked);
});

Instead of assigning the click event to the one checkbox from the first example via its ID (#cb_show), here, we assign the event via the class (.cb_show) to all checkboxes with the class "cb_show" instead. In the event code, we read the data-div attribute of the checkbox that was clicked and use the value of this attribute to show or hide the corresponding DIV container.