+ Start a Discussion
rishabh rathor 18rishabh rathor 18 

My requirement is to display Account and its related contacts using accordion Using VF page.

Here Its my Code:-
========Apex Controller=============
public class AccordianCntrl {
    public String selectedaccountId { get; set; }
    public  List<Contact> Contacts{get;set;}
    public AccordianCntrl(){
        Contacts = new List<Contact>();
    }
    public List<Account> getListOfAccounts()
    {
     List<Account> AccountList = [select id,Name,Phone,AccountNumber,Industry from Account Limit 10] ;
      return AccountList;
       }
    
    // Return Accounts
    public pagereference contactNames()
    {
         system.debug('id '+selectedaccountId);
        
          Contacts = [Select FirstName, LastName, Email , Phone From Contact where Accountid=:selectedaccountId];
        //List<Contact> results1 = [Select FirstName, LastName, Email , Phone From Contact ];
        
        System.debug(Contacts);  
        return null;
        
    }
}


========VF Page===================
<apex:page controller="AccordianCntrl" docType="html-5.0" standardStylesheets="true" showHeader="false">
    <apex:slds />
    
    <style>
        .slds-scope .slds-section { position: relative; margin: 0px;}
        .slds-scope .slds-section:after { content: ""; width: 8px; height: 8px; border-bottom: 2px solid #000; border-left: 2px solid #000; position: absolute; transform: rotate(-135deg) skew(0deg); top: 13px; left: 12px; cursor: pointer;}
        .slds-scope .slds-section.slds-is-open:after { content: ""; width: 8px; height: 8px; border-bottom: 2px solid #000; border-left: 2px solid #000; position: absolute; transform: rotate(-45deg) skew(0deg); top: 12px; right: 10px; cursor: pointer;}
        .slds-scope .slds-section__title-action{ background: transparent; border-top: 1px solid #dddbda !important;}
        .slds-scope .slds-section:first-child .slds-section__title-action{ border-top:0px !important;}
        .slds-scope .slds-section.slds-is-open .slds-section__content{ padding:15px 30px;}
    </style>
    
    <!--jQuery CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--Salesforce Lightning Design System Static Resource-->
        <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
            <script>
            var j$ = jQuery.noConflict();
    </script>
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        </head>
        <!--The Salesforce Lightning Design System Wrapping Div with Scoping Class -->
        <div class="minerva18">
            
            
            <fieldset class="slds-box slds-theme--default slds-container">
                
                <!-- Single Section Wrapper With Three SLDS Sections, The Wrapper Div Class must be 'Minerva18SectionGroupSingle' -->
                <div class="Minerva18SectionGroupSingle" >
                    
                    <div class="slds-section">
                        <h3 class="slds-section__title">
                            <button class="slds-button slds-section__title-action">
                                <svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon--left">
                                    <use xlink:href="{!$Resource.SLDS}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                                </svg>Accounts</button>
                        </h3>
                        <div class="slds-section__content">
                            
                            <apex:outputPanel id="table"> 
                                <table class="slds-table slds-table_cell-buffer slds-table_bordered" >
                                    <thead>
                                        <tr >
                                            
                                            <th class="" scope="col">
                                                <div class="slds-truncate" title="Name">Name</div>
                                            </th>
                                            
                                            <th class="" scope="col">
                                                <div class="slds-truncate" title="Account Number">Account Number</div>
                                            </th> 
                                            <th class="" scope="col">
                                                <div class="slds-truncate" title="Phone">Phone</div>
                                            </th>
                                            <th class="" scope="col">
                                                <div class="slds-truncate" title="Industry">Industry</div>
                                            </th>
                                        </tr>
                                    </thead>
                                    
                                    <tbody>
                                        <apex:repeat value="{!ListOfAccounts}" var="con">
                                            <tr class="slds-hint-parent">
                                                
                                                
                                                <td data-label="Account Number" >
                                                    <div class="slds-truncate" title="Account Number"> <Apex:outputfield value="{!con.AccountNumber}"/></div>
                                                </td> 
                                                <td data-label="Phone">
                                                    <div class="slds-truncate" title="Phone"> <apex:outputfield value="{!con.Phone}"/></div>
                                                </td>
                                                <td data-label="Industry">
                                                    <div class="slds-truncate" title="Industry"> <apex:outputfield value="{!con.Industry}"/></div>
                                                </td>
                                            </tr>
                                        </apex:repeat> 
                                    </tbody>
                                </table>
                                <apex:actionSupport event="onchange"  action="{!contactNames}" reRender="table"/>
                            </apex:outputPanel>
                        </div>
                    </div>
                    
                </div>
                <!-- Single Section Wrapper End-->
            </fieldset>
            
            
            <fieldset class="slds-box slds-theme--default slds-container">
                <div class="Minerva18SectionGroupSingle" >
                     
                    <div class="slds-section">
                         <h3 class="slds-section__title">
                                <button class="slds-button slds-section__title-action">
                                    <svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon--left">
                                        <use xlink:href="{!$Resource.SLDS}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                                    </svg>
                                   Related contacts
                             </button>
                            </h3>
                            <div class="slds-section__content">
                                <p>
                                    Hello...
                                </p>          
                            </div>
                    </div>
                    
                </div>
                
            </fieldset> 
        </div>
        <script>
        /*SLDS Sections*/
        j$('.slds-section__content').hide();
        j$('.slds-section__title').find('button').find('svg').css('transition', '0.3s');
        j$('.slds-section__title').click(function(){
            if(j$(this).parent().parent().hasClass('Minerva18SectionGroupSingle')){
                if(j$(this).parent().hasClass('slds-is-open')){
                    j$(this).parent().removeClass('slds-is-open');
                    j$(this).parent().find('.slds-section__content').hide();
                }
                else{
                    j$(this).parent().parent().find('.slds-section').removeClass('slds-is-open');
                    j$(this).parent().parent().find('.slds-section__content').hide();
                    j$(this).parent().toggleClass('slds-is-open');
                    j$(this).parent().find('.slds-section__content').show();
                } 
            }
            else{
                j$(this).parent().toggleClass('slds-is-open');
                if(j$(this).parent().hasClass('slds-is-open')){
                    j$(this).parent().find('.slds-section__content').show();
                }else{
                    j$(this).parent().find('.slds-section__content').hide();
                }
            }
        });
        /*SLDS Sections*/
        </script>
    </html>
</apex:page>

Thanks & Regards!!
Rishabh Rathor
Plz Help me ASAP.