I need ($(“#flip”).click slideToggle ) to perform several times on the same page with same <div> ID

Question

I have a FAQs page that reads from XML using XSl code, The div for the question and answer will be repeated as much as the number of records in the XML.

This is the XSL code:

<xsl:for-each select ="TSPRoot/FAQS/FAQ">
<div id="flip">
<xsl:value-of select ="Question"/>
</div>
<div id="panel">
<xsl:value-of  select ="Answer" disable-output-escaping ="yes"/>
</div>
</xsl:for-each >

And in the head I have this JQuery code:

<script>
$(document).ready(function(){
    $("#flip").click(function(event){
        event.preventDefault();
        $("#panel").slideToggle("slow");
    });
});
</script>

The slideToggle works only for the first div, then it do not work.

I can't figure out any ideas.

Answer 1

HTML 101: Ids are singular, you can not have more than one item with the same id!

Use a class! Use next()

HTML:

<div class="question">XXX</div>
<div class="answer">YYY</div>
<div class="question">XXX</div>
<div class="answer">YYY</div>
<div class="question">XXX</div>
<div class="answer">YYY</div>

JavaScript:

$(document).on("click",".question", function(){
     $(this).next().toggle();   
});

Example

http://jsfiddle.net/8xvTM/1/