I'm still learning JQuery and trying to figure it out. Can you help me understand what's going wrong with my code below?
I have multiple content blocks with classes .acc-0, acc-1, and so on. I want to show and hide the .plans-breakdown when the .open-link button inside each block is clicked.
Here is an example using .acc-1:
$('.acc-1').each(function(){
$(this).find('.open-link').on('click',function() {
$('.plans-breakdown').not(this).css('display','none');
$(this).find('.plans-breakdown').fadeToggle(600);
});
});
HTML:
<div class="schedule-plan acc-0">
<div class="open-link">Floor plan acc-0</div>
<div class="plans-breakdown">
content here
</div>
</div>
</div>
<div class="schedule-plan acc-1">
<div class="open-link">Floor plan acc-1</div>
<div class="plans-breakdown">
content for acc-1 here
</div>
</div>
I want this functionality to only work for the specific code block, in this case, .acc-1. That's why I wrapped the function in $('.acc-1').each(function(){}.
I used (this) to target the correct .open-link button for the function. Also, for the .fadeToggle action, I specified the instance of .plan-breakdown nested inside .acc-1.
Take a look at my fiddle. You'll see that the first block works (.acc-0), but when I use .each, it doesn't.
http://jsfiddle.net/bazzle/Q4zmS/2/
Thank you.