Skip to content

Quick Simple Way to Show/Hide with a Checkbox using jQuery

Here’s a quick and simple way to do this. I often have to show and hide set of panels based on whether something is checked or not. jQuery code is pretty straightforward and it comes in handy.

$( function() {    

  function toggleCheckbox( trigger, hidethese )
    if ( $( trigger ).attr("checked") )
      $( hidethese ).hide();
      $( hidethese ).show();
  // jQuery object that has your checkbox
  var triggerCheckbox = $( "#showPreonDescription" );
  // jQuery object for collection of elements you want to hide
  // For this example, I could've also just done #panel by itself
  // to hide everything
  var panelsToHide = $("#subpanel,#maincontent,#nav");  
  // Call the function on click.
    function ()
      toggleCheckbox( triggerCheckbox, panelsToHide );

I have the demo if you want the source as well.



Dan View All

Blog owner.

%d bloggers like this: