Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › How we can make a button of expand and collapse in Salesforce?

Tagged: ,

  • Salesforce® Discussions

    How we can make a button of expand and collapse in Salesforce?

    Posted by Shubham on August 21, 2017 at 11:58 AM

    we have to display a list of type

    Account[+]

    Contact[+]

    If we click on + sign then all Account or Contact display and a [-] sign appear on Account i.e. Account[-] If we click [-] sign

    then all Contact or Account are collapse as initially

    Parul replied 8 years ago 3 Members · 4 Replies
  • 4 Replies

  • shariq

    Member
    August 21, 2017 at 1:00 PM

    Hi Shubham,

    public class AccountPlusContact
    {
    public String plus{get;set;}
    public List<Account> accList{get;set;}
    public List<Contact> conList{get;set;}
    public Integer i;
    public AccountPlusContact()
    {
    i = 0;
    plus = '[+]';
    accList = new List<Account>();
    conList = new List<Contact>();
    }
    public void accountShow()
    {
    if(i == 0)
    {
    accList = [SELECT Name FROM Account LIMIT 100];
    plus = '[-]';
    i = 1;
    }
    else
    {
    plus = '[+]';
    accList = null;
    i = 0;
    }
    }
    }

     

    You can similarly write for contacts.

    Hope this helps.

  • [adinserter block='9']

  • Shubham

    Member
    August 21, 2017 at 1:33 PM

    Thanks Shariq

    Please give Vf Page

  • shariq

    Member
    August 21, 2017 at 1:34 PM

    Hi Shubham,

    Apex Page:-

    <apex:page controller ="AccountPlusContact">
    <apex:form>
    <apex:pageBlock>
    <h1>
    Account
    </h1>
    <apex:commandLink value = "{!plus}" action ="{!accountShow}"/>
    <apex:pageBlockTable value="{!accList}" var="acc" columns="3">
    <apex:column value="{!acc.Name}"/>
    </apex:pageBlockTable>
    </apex:pageBlock>
    </apex:form>
    </apex:page>

     

  • Parul

    Member
    September 16, 2018 at 3:23 PM

    <apex:page id="pgId"  controller="SupportController" tabStyle="support__tab">
    <!-- Stylesheet for support page section theme-->
    <apex:stylesheet value="{!URLFOR($Resource.SupportStyles)}"/>

    <apex:form id="fmId">
    <apex:pageMessages />

    <div><a href="#" onclick= "expandAll();"><h1>Expand All</h1></a>&nbsp;/&nbsp;<a href="#" onclick= "collapseAll();"><b>Collapse All</b></a></div>

    <br/>
    <apex:pageBlock id="pBlock"  >
    <apex:pageBlockSection collapsible="true" rendered="false"/>
    <apex:repeat value="{!SupportPageSectionList}" var="supPgSecVar">
    <apex:pageBlockSection id="sec1">
    <div id='sec1' >&nbsp;&nbsp;[<a >Show/Hide</a>]&nbsp;&nbsp;&nbsp;<b>{!supPgSecVar.Section_Name__c}</b></div>
    <div  id='sectn1' class= "section1" style="display:none;" >
    <table>
    <tr>
    <td align='left' valign='top' width="1000">
    <apex:stylesheet value="clear:both;"/>
    <apex:outputText value="{!supPgSecVar.Section_Body__c}" escape="false"/>
    </td>
    </tr>
    </table>
    </div>
    </apex:pageBlockSection>
    <br/>
    </apex:repeat>
    </apex:pageBlock>

    <script type='text/javascript'>
    function expandAll(){
    $(".section1").slideDown('fadeOut');

    }
    function collapseAll(){
    $(".section1").slideUp('slow');

    }

    $(document).ready(function(){
    $("#sec1").click(function(){
    $(".section1").slideToggle("slow");
    });
    });
    </script>
    </apex:form>
    </apex:page>

     

    Thanks

Log In to reply.

Popular Salesforce Blogs