You need to sign in to do that
Don't have an account?
vanillasky1.3938481563139287E12
Expand/Collapse in VF page
We have built a VF page where its currently showing the Type of Products as top section and fetching the list of products belonging to that type:
e.g
Electronics
* Mobile
*Laptop
*Camera
Books
*Fiction
*Non fiction
I want a [+] [-] beside Electronics/Books
When I click [+] , all the below items should expand , on [-] it should Collapse.
e.g
Electronics
* Mobile
*Laptop
*Camera
Books
*Fiction
*Non fiction
I want a [+] [-] beside Electronics/Books
When I click [+] , all the below items should expand , on [-] it should Collapse.
You have to use Javascript to fulfill your requirement.
see below Example for your reference.
Visualforce Page:
<apex:page id="myPage" tabstyle="Account" controller="Expandcollapsepage" >
<script>
function switchMenu(obj,obj1,obj2)
{
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
var e2 = document.getElementById(obj1);
if ( e2.style.display != 'none' ) {
e2.style.display = 'none';
}
else {
e2.style.display = '';
}
var e3 = document.getElementById(obj2);
if ( e2.style.display != 'none' ) {
e3.style.display = 'none';
}
else {
e3.style.display = '';
}
}
</script>
<apex:pageblock id="pnMain" title="Expand/Collapse Example">
<apex:repeat value="{!lstThingtype}" var="th">
<apex:outputpanel id="plusimage" style="display:none;">
<apex:image url="{!$Resource.Plus_Image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.minusimage}','{!$Component.plusimage}')" title="Expand - Team Member's"/>
</apex:outputpanel>
<apex:outputpanel id="minusimage" >
<apex:image url="{!$Resource.Minus_image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.plusimage}','{!$Component.minusimage}')" title="Collapse - Team Member's"/>
</apex:outputpanel>
<apex:outputLabel value="{!th.strThingtype}"></apex:outputLabel>
<apex:outputpanel id="inlinetablesec">
<apex:repeat var="count" value="{!th.lstThings}">
<br/>
<apex:outputLabel value="{!count.strThing}"></apex:outputLabel>
</apex:repeat>
</apex:outputpanel>
<br/>
</apex:repeat>
</apex:pageblock>
</apex:page>
Apex Class:
public class Expandcollapsepage{
public List<Account> getaccsandtmember(){
List<Account> accounts = [Select Id,(Select TeamMemberRole, User.Name From Account.AccountTeamMembers), Name, BillingCountry from Account];
return accounts;
}
Public List<Thingtype> getlstThingtype(){
List<Thingtype> lstThingtype = new List<Thingtype>();
List<Things> lstThings = new List<Things>();
Things objThings;
objThings = new Things();
objThings.strThing = 'Mobile';
lstThings.add(objThings);
objThings = new Things();
objThings.strThing = 'Laptop';
lstThings.add(objThings);
objThings = new Things();
objThings.strThing = 'Camera';
lstThings.add(objThings);
Thingtype objThingtype;
objThingtype = new Thingtype();
objThingtype.strThingtype = 'Electronics';
objThingtype.lstThings = lstThings;
lstThingtype.add(objThingtype);
lstThings = new List<Things>();
objThings = new Things();
objThings.strThing = 'Fiction';
lstThings.add(objThings);
objThings = new Things();
objThings.strThing = 'Non fiction';
lstThings.add(objThings);
objThingtype = new Thingtype();
objThingtype.strThingtype = 'Books';
objThingtype.lstThings = lstThings;
lstThingtype.add(objThingtype);
return lstThingtype;
}
Public class Thingtype{
Public string strThingtype {get; set;}
Public List<Things> lstThings{get; set;}
}
Public class Things{
Public string strThing {get; set;}
}
}
Thank You,
Hitesh Patel
SFDC Certified Developer & Administrator & Advanced Administrator & Sales cloud consultant
Email :- hiteshpatel.aspl@gmail.com
My Blog:- http://mrjavascript.blogspot.in/