Jquery dynamic toggle problem -


I wrote this jquery that toggles each block. But when you toggle on one you toggle the rest.

How can I do dynamic toggles (show / hide) each block independently, so when I toggle in a section it does not toggle the other section.

Note: I can change the name of each class for the block, because it is dynamically cloned.

Thanks

  $ (document) .ready (function () ($ Alternatepayee-b). Hide (); $ ('alternatepayee-checkbox'). (Function () {$ ('alternatepayee-b'). Slide toggle ("slow");});});   

Markup:

  & lt; Div class = "alternatepayee-checkbox clearfix" & gt; & Lt; Input type = "checkbox" value = "y" name = "subscribe" id = "checkbox_4" & gt; & Lt; Label class = "foreign" = "checkbox_4" & gt; Alternate payer & lt; / Label & gt; & Lt; / Div & gt; & Lt; Div class = "optional couple-b clearfix" & gt; & Lt; Label class = "field-accoundtid arrow" & gt; Account ID & lt; Input type = "text" name = "accountid" value = "" /> & Lt; / Label & gt; & Lt; Label class = "field-first arrow" & gt; First name & lt; Input type = "text" name = "first_name" value = "" /> gt; & Lt; / Label & gt; & Lt; Label class = "field-last arrow" & gt; Last name & lt; Input type = "text" name = "last_name" value = "" /> & Lt; / Label & gt; & Lt; / Div & gt; & Lt ;! - second block - & gt; & Lt; Div class = "optional cookie-checkbox cleanfix" & gt; & Lt; Input type = "checkbox" value = "y" name = "subscribe" id = "checkbox_4" & gt; & Lt; Label class = "foreign" = "checkbox_4" & gt; Alternate payer & lt; / Label & gt; & Lt; / Div & gt; & Lt; Div class = "optional couple-b clearfix" & gt; & Lt; Label class = "field-accoundtid arrow" & gt; Account ID & lt; Input type = "text" name = "accountid" value = "" /> & Lt; / Label & gt; & Lt; Label class = "field-first arrow" & gt; First name & lt; Input type = "text" name = "first_name" value = "" /> gt; & Lt; / Label & gt; & Lt; Label class = "field-last arrow" & gt; Last name & lt; Input type = "text" name = "last_name" value = "" /> & Lt; / Label & gt; & Lt; / Div & gt;    

jQuery selector elements work on set The selector needs to be refined in your click event handler, so it only works on the desired element a something (approximate) should work like this:

  $ ('Alternatepayee-checkbox'). Click (function () {// 'This' refers to a checkbox diva which was actually clicked next to the next silencing which appears next to'. Optionally B-$ '(this) .next (' alternatepayee -b '). Slide Toggle ("Slow");});   

Depending on your markup, which will vary, but this is a general idea.

In addition, if you are adding these dynamically, then you can use it to automatically bind your event handler for elements added after your page load.

Comments