• #21758
    Salesforce | Shubham Shubham #120
    Forcetalks

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

    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

     

    #21763
    Salesforce | shariq shariq #1
    Forcetalks

    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.

    #21765
    Salesforce | Shubham Shubham #120
    Forcetalks

    Thanks Shariq

    Please give Vf Page

    #21766
    Salesforce | shariq shariq #1
    Forcetalks

    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>

     

    #34554
    Salesforce | Parul Parul #2
    Forcetalks

    <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

Viewing 5 posts - 1 through 5 (of 5 total)

Please to reply to this topic.

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2018 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?