javascript - .slideToggle(); works on every other div? -

i'm trying work slidetoggle in order show post information when clicking on + sign.

you can see progress on test blog here: http://noitsnotitsnotokay.tumblr.com/

so far, have html , javascript (the html portion repeats every post, , because of tumblr defauts, can't create new class every post):

<div id="info"> <div class="pstinfo">     <!-- info here --> </div> <span class="plsign">+</span> </div>  <script> $("div.pstinfo").hide(); $("span.plsign").click(function() { $(this).parent().children("div.pstinfo").stop().slidetoggle("slow"); return false; }); </script> 

as can see in test blog, works in 1 post, , in next, won't open way. there way fix this?

the main problem see in code, repeating code block each time on each comment.

so, have multiple div same id & multiple <script> blocks same bind actions.

like:

{block:posts}     <div><!-- // code in op example (html+id+class+js) --></div> {/block:posts} 

that give you:

<div><!-- // code in op example (html+id+class+js) --></div> <div><!-- // code in op example (html+id+class+js) --></div> <div><!-- // code in op example (html+id+class+js) --></div> ... 

error example op code: http://jsfiddle.net/gmolop/2fujr/

---

i' suggest before else, change like:

{block:posts}     <div><!-- // html code in op example (only class, no id) --></div> {/block:posts} <script> /* js in op example (outside loop) */ </script> 

that give like:

<div><!-- // html code in op example (only class) --></div> <div><!-- // html code in op example (only class) --></div> <div><!-- // html code in op example (only class) --></div> <script>  /* js in op example (only once) */ </script> 

working example suggested format: http://jsfiddle.net/gmolop/2fujr/1/