Advanced Search

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.

Expand | Embed | Plain Text

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"));
  4.  
  5. 	if( $(element).is(':checked') ) {
  6. 		$("."+actionItem).show();
  7. 	} else {
  8. 		$("."+actionItem).hide();
  9. 	}
  10. }
  11.  
  12. // You can call the function like this:
  13.  
  14. $(".selectionBox input").change(function(){
  15. 	checkToggler( $(this) );
  16. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.