Accordion doesn't collapse using <apex:repeat in a VF Page

Question

I was looking to implement the accordion in visualforce page and found this link and i like it and when I try to implement on my page having <apex:Repeat> then the accordion does not collapse/close so I tried without using the <apex:repeat> than it work as it shown here in demo

I have created very simple page with the use of apex:repeat and if you just copy and paste the code in your org, you will see that it does not collapse when you click on the header of the accordion.

PS: there is dependency and you need to have the components which you can download from here

VF Page:

<apex:page sidebar="false" controller="repeatCon">
  <apex:form >  
    <apex:sectionHeader title="Accordion" subtitle="Accordion" />
    <apex:repeat value="{!strings}" var="string" id="theRepeat">
    <c:Accordion >
        <c:AccordionSection title="Section "> 
           <apex:pageBlock title="Page block" mode="edit " id="pb">
               <apex:pageBlockSection title="my title" columns="1" id="rt"  > 
                    some text here...
                </apex:pageBlockSection>   
            </apex:pageBlock> 
            </c:AccordionSection>
    </c:Accordion>
     </apex:repeat>
    </apex:form> 
</apex:page>

Apex:

public class repeatCon { 

    public String[] getStrings() {
      return new String[]{'ONE','TWO','THREE'};

    } 
}

in order to work the sample page you need the following coponents and resources:

Answer 1

Each c:Accordion area always has one section open. The way you've written your code results in many c:Accordion elements, which in turns keeps all of them open. Simply move the apex:repeat inside the c:Accordion, and it works as expected:

<apex:page sidebar="false" controller="repeatCon">
  <apex:form >  
    <apex:sectionHeader title="Accordion" subtitle="Accordion" />
    <c:Accordion >
    <apex:repeat value="{!strings}" var="string" id="theRepeat">
        <c:AccordionSection title="Section "> 
           <apex:pageBlock title="Page block" mode="edit " id="pb">
               <apex:pageBlockSection title="my title" columns="1" id="rt"  > 
                    some text here...
                </apex:pageBlockSection>   
            </apex:pageBlock> 
            </c:AccordionSection>
     </apex:repeat>
    </c:Accordion>
    </apex:form> 
</apex:page>