user244394 user244394 - 3 months ago 8
jQuery Question

Jquery to show hidden div blocks not showing when the checkboxes are checked

I have this jquery function that's supposed to show the div blocks associated with the checkbox is clicked and hidden when the chekcbox in unchecked.
How do I shows the selected div's associated with the ckecbox when each check is clicked. Curretly when i check and uncheck its not showing teh hidden div elements

I tried using this

$(this).find(".filterBlock").show();


Here is my code and fiddle

$(document).ready(function(){
$(".filterBlock").hide();
//fitlers
$(".checkbox-container :checkbox").click(function() {
$("div.filterBlock").hide();
$(".checkbox-container :checkbox:checked").each(function() {
alert($(this).val());
// $(this).show();

$(this).find(".filterBlock").show();
});
});


});

Answer

You can use:

$(".filterBlock").hide();
$(".checkbox-container :checkbox").click(function() {
  $(this).closest('.row').next('.row').find('.filterBlock').toggle()
});

jsFiddle example

Comments