-
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
-
4 Replies
-
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.
-
Thanks Shariq
Please give Vf Page
-
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> -
<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> / <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' > [<a >Show/Hide</a>] <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
Your 1st Step to become a Salesforce Certified Platform Developer 1 [Exam Notes]
Are you one among the many who endeavour to become a proficient Salesforce Developer? Then, this would be your first step after the completion of…
Changes to the Salesforce Developer Exam: All you need to know
As many of you may be aware, Salesforce.com has announced changes to the Salesforce Developer Certification roadmap: this article offers a detailed Salesforce Developer exam guide on the…
How to Effectively Manage Ideas on Salesforce Experience Cloud
The idea-creation process is a journey with many twists and turns. Ideas can be born in a flash, then bounce around for days or weeks…
