0

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:

|improve this question
  • Not sure if I have an answer, but I'll take a peek. – sfdcfox Apr 15 '16 at 3:54
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>
|improve this answer
  • one question came to my mind, is that possible to click on the current Accordion header and close? so in other words all collapse ? – Nick Kahn Apr 15 '16 at 16:39
  • @NickKahn In the Accordion component, lines 20-24, we just need to add a line of code: function initAccordion(){ $j( ".custAaccordion" ).accordion({ header: ".custHeader", collapsible: true }); }. Perhaps we could recommend to the original author that the collapsible attribute be available in the component's definition. – sfdcfox Apr 15 '16 at 16:55
  • how did you find out collapsible property? it did work but just curious to know.. .thanks again – Nick Kahn Apr 15 '16 at 17:00
  • @NickKahn I started by looking at the source for the component, and deduced that they were most likely using the jQuery UI Accordion plugin, checked the docs for that plugin, then tested it in my dev org. Luckily it was the standard plugin, because the code's been minified, so I would have had trouble figuring it out if it wasn't. – sfdcfox Apr 15 '16 at 17:07
  • great tip... I will keep in mind.. – Nick Kahn Apr 15 '16 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.