Click Checkbox to Show/Hide Content

by Matthew Schenker

HTML

<input type="checkbox" id="show-hide-checkbox" /> Click me to show content!
<div id="show-hide-content">
  And this is the content that gets shown or hidden!
</div>

CSS

.show-hide-content {
  display: none;
}

JavaScript

$(function() {
  $("#show-hide-checkbox").click(function() {
    if ($(this).is(":checked")) {
      $("#show-hide-content").show();
    } else {
      $("#show-hide-content").hide();
    }
  });
});