Posted By

gellpak on 05/26/11



Viewed 2 times

Show/hide content with matching checkboxes

/ Published in: jQuery

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.

  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.