Show/Hide Element Based on Checkbox

Use JQuery to show/hide a div, or other element, based on the state of a checkbox.

by Matthew Schenker

HTML

<div class="controller_container">
  <label for="display_controller">Display Another Option?</label>
  <input class="display_controller" type="checkbox" name="display_controller" value="1" />
  <span class="controller_text">Yes</span>
</div>

<div class="conditional_container">
  <label for="conditional_field">More Information:</label>
  <input type="text" name="conditional_field" class="conditional_field" />
</div>

CSS

.controller_container,
.conditional_container {
  width: 300px;
  padding: 20px 0;
}

.controller_container {
  background-color: #f0f0f0;
}

.conditional_container {
  margin-top: 20px;
  background-color: #ddd;
}

JavaScript

$(".conditional_container").hide();
$(".display_controller").click(function() {
  if ($(this).prop("checked")) {
    $(".conditional_container").show(400);
  } else {
    $(".conditional_container").hide(400);
  }
});