-
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
Turn Your Mission into a ‘Connected’ Nonprofit with Salesforce
Technological disruption is pervading every industry, and the Non-profit sector is no longer a different kettle of fish. For non-profits, where collaboration, communication, community building…
Which Industries Can Use Salesforce in 2024?
What is Salesforce? Salesforce is a cloud-based CRM software. It has a ton of features to help companies with their customer relationships, lead management, case…
Salesforce Financial Services Cloud Spring '24 Highlights
Spring is on the horizon, and so is Salesforce's Spring '24 release, bringing elevated efficiency, enriched user experiences, and enhanced operations to Salesforce Financial Services…
