Show/hide content with matching checkboxes

/ Published in: jQuery
Save to your folder(s)

This function follows the following naming conventions: Give your checkboxes ID tags of "[contenttitle]trigger", where [contenttitle] is whatever you like. Then, give your hide-able content classes that match, without the "trigger". This function will look at the checkbox ID and checked state, and then show/hide the content with those classes accordingly.

So for example, you have a checkbox with the ID "content4trigger", and two divs with the class "content4". This will show and hide the divs based on the id of the checkbox.

Copy this code and paste it in your HTML
  1. function checkToggler(element) {
  2. var actionItem = $(element).attr("id");
  3. actionItem = actionItem.substring(0, actionItem.indexOf("trigger"));
  5. if( $(element).is(':checked') ) {
  6. $("."+actionItem).show();
  7. } else {
  8. $("."+actionItem).hide();
  9. }
  10. }
  12. // You can call the function like this:
  14. $(".selectionBox input").change(function(){
  15. checkToggler( $(this) );
  16. });

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.