0

If I click preview, there are two sections are iterated and displayed here. If I click preview the section first has to be displayed and second section should be minimized that means not expandable. If I click second section, the first section should be minimized that means not expandable

My Visual Force page

<apex:page controller="test" id="page"  cache="false" expires="0" sidebar="false">
     <apex:form id="Form">

     <apex:pageBlock title="Testingpurpose">
     <br/>


     <apex:repeat value="{!List}" var="List" id="divId">


      <p id="firstname">{!List.Name}    
     </p>  
     <br/>  
     <div> 

     <apex:panelGrid columns="2">
     <apex:outputLabel > Name :</apex:outputLabel>
     <apex:outputText ><b>{!List.name}</b></apex:outputText></apex:panelGrid>

     </apex:pageBlockTable>
     <br/>
     </div>

     </apex:repeat>     
     </apex:pageBlock>

I am following this link - https://jqueryui.com/accordion/

I am trying with my vf page with same code:

<apex:page controller="test" id="page"  cache="false" expires="0" sidebar="false">
     <apex:form id="Form">
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
  <link rel="stylesheet" href="/resources/demos/style.css"/>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#divId" ).accordion();
  } );
  </script>
     <apex:pageBlock title="Testingpurpose">
     <br/>


     <apex:repeat value="{!List}" var="List" id="divId">
     <div id="divId">

      <p id="firstname">{!List.Name}    
     </p>  
     <br/>  
     <div> 

     <apex:panelGrid columns="2">
     <apex:outputLabel > Name :</apex:outputLabel>
     <apex:outputText ><b>{!List.name}</b></apex:outputText></apex:panelGrid>

     </apex:pageBlockTable>
     <br/>
     </div>

     </apex:repeat>     
     </apex:pageBlock>

        </apex:form>


</apex:page>

Accordion output is not fetching properly

closed as off-topic by glls, Pranay Jaiswal, Himanshu, Sebastian Kessel, Basti Apr 8 at 6:02

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on problems in code you've written must describe the specific problem and include valid code to reproduce it. For help writing short, self-contained syntactically-valid examples, see: SSCCE.org" – glls, Pranay Jaiswal, Himanshu, Basti
If this question can be reworded to fit the rules in the help center, please edit the question.

1

This plugin requires a parent "accordion" component, followed by specific rules for the internal elements. Your markup should look like this:

 <div id="divId"> <!-- the entire accordion -->
 <apex:repeat value="{!List}" var="List" id="divId">
  <h3>{!List.Name}</h3> <!-- the header for the accordion section -->
 <div> <!-- the body of the accordion section -->
 <apex:panelGrid columns="2">
 <apex:outputLabel > Name :</apex:outputLabel>
 <apex:outputText ><b>{!List.name}</b></apex:outputText></apex:panelGrid>
 </div>
 </apex:repeat>
 </div>

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