CODEWITHSUNDEEP
jquerytoggle
user244394
user244394

Reputation: 13448

Jquery dynamic toggle problem

I wrote this jquery which toggles each block. But when you toggle one the rest also toggles.

How can i dynamicaly toggle(show/hide) each block independently, so when i toggle in one section it doesnt toggle the other section.

NOTE : I cant rename each class for the block, since its being dynamically cloned.

Thanks

$(document).ready(function() {
  $('.alternatepayee-b').hide();  

  $('.alternatepayee-checkbox').click(function() {  
    $('.alternatepayee-b').slideToggle("slow");    
  });    
});

Markup:

<div class="alternatepayee-checkbox clearfix">
  <input type="checkbox" value="y" name="subscribe" id="checkbox_4">
  <label class="foreign" for="checkbox_4" >Alternate Payee</label>
</div>
<div class="alternatepayee-b clearfix" >                
  <label class="field-accoundtid  arrow">Account ID
    <input type="text" name="accountid" value="" /></label>  
  <label class="field-first arrow" >First Name
    <input type="text" name="first_name" value="" /></label>
  <label class="field-last arrow">Last Name
    <input type="text" name="last_name" value="" /></label>           
</div>

<!-- 2nd block -->
<div class="alternatepayee-checkbox clearfix">
  <input type="checkbox" value="y" name="subscribe" id="checkbox_4"> 
  <label class="foreign" for="checkbox_4" >Alternate Payee</label>
</div>
<div class="alternatepayee-b clearfix" >            
  <label class="field-accoundtid arrow">Account ID
    <input type="text" name="accountid" value="" /></label>  
  <label class="field-first arrow" >First Name
    <input type="text" name="first_name" value="" /></label>
  <label class="field-last arrow">Last Name
    <input type="text" name="last_name" value="" /></label>           
</div>

Upvotes: 1

Views: 797

Answers (1)

Michael Haren
Michael Haren

Reputation: 108276

jQuery selectors work on sets of elements. You need to refine the selector in your click event handler so it only works on the one desired element. Something (approximately) like this should work:

$('.alternatepayee-checkbox').click(function() {
  // 'this' refers to the single checkbox div that was actually clicked
  // next looks for the next sibling that matches '.alternatepayee-b'
  $(this).next('.alternatepayee-b').slideToggle("slow");
});

What you use for .next will vary depending on your markup but that's the general idea.

Also, if you are adding these dynamically, you can use .live('click', ...) instead to automatically bind your event handler to elements added after your page loads.

Upvotes: 1

Related Questions