Creating Expandable / Collapsible Lightning Design Sections In Salesforce Visualforce
Table of contents
Hello There! Welcome Back
In this post, we are gonna make the Lightning Design System “Sections” component interactive(Expandable/Collapsible sections).
Let’s get started!
Things we will be using:
- The Salesforce Lightning Design System
2) jQuery
Step 1: Gathering the resources we need.
Salesforce Lightning Design System:
Download the Custom Scoped CSS form here with your desired Scoping Class. (be sure to prefix your scoping class with a dot)
The Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts.
I am using “slds” as a scoping class in this blog post.The file you download will be named “salesforce-lightning-design-system.zip”, just rename it to something convenient and short like “SLDS”.
Upload the zip file as your Static Resource.
jQuery:
We will be using CDN for this here, you can always have it as a static resource. Either way is fine.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Now we have all the stuff we need, lets code what we want.
Step 2: The Code.
Set the StandardStylesheets to false and doctype to html-5.0 (Code: Line 1)
We put all the resources we need into the page and set jQuery to noConflict mode.(Code: Lines 2 to 8)
Now, there are two types of these sections, i.e,
Only one section open at a time (Code: Lines 19 to 59),
Multiple Sections open (Code: Lines 65 to 102).
Create SLDS Section Component as shown in the SLDS website here, without the
slds-is-openclass for the parent div with classslds-section(As Shown in Code: Lines 21 to 33)
To know more on getting started with The Lightning Design System you can refer my another blog post.The Most Important Step: Including the code to make the SLDS Sections Expandable/Collapsible (Code: Lines 107 to 132)
<apex:page docType="html-5.0" standardStylesheets="false" showHeader="false">
<!–jQuery CDN–>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!–Salesforce Lightning Design System Static Resource–>
<apex:stylesheet value="{!URLFOR($Resource.SLDS203, ‘assets/styles/salesforce-lightning-design-system-vf.min.css’)}" />
<script>
var j$ = jQuery.noConflict();
</script>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!–The Salesforce Lightning Design System Wrapping Div with Scoping Class –>
<div class="minerva18">
<fieldset class="slds-box slds-theme–default slds-container">
<legend class="slds-text-heading–medium slds-p-vertical–medium">Single Section</legend>
<!– Single Section Wrapper With Three SLDS Sections, The Wrapper Div Class must be ‘Minerva18SectionGroupSingle’ –>
<div class="Minerva18SectionGroupSingle" >
<!–SLDS Section Start–>
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon–left">
<use xlink:href="{!$Resource.SLDS203}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
Section Title 1
</button>
</h3>
<div class="slds-section__content">
<p>Section 1 Content</p>
</div>
</div>
<!–SLDS Section End–>
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon–left">
<use xlink:href="{!$Resource.SLDS203}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
Section Title 2
</button>
</h3>
<div class="slds-section__content">
<p>Section 2 Content</p>
</div>
</div>
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon–left">
<use xlink:href="{!$Resource.SLDS203}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
Section Title 3
</button>
</h3>
<div class="slds-section__content">
<p>Section 3 Content</p>
</div>
</div>
</div>
<!– Single Section Wrapper End–>
</fieldset>
<fieldset class="slds-box slds-theme–default slds-container">
<legend class="slds-text-heading–medium slds-p-vertical–medium">Multiple Sections</legend>
<!–Multiple Sections Start–>
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon–left">
<use xlink:href="{!$Resource.SLDS203}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
Section Title 1
</button>
</h3>
<div class="slds-section__content">
<p>Section 1 Content</p>
</div>
</div>
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon–left">
<use xlink:href="{!$Resource.SLDS203}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
Section Title 2
</button>
</h3>
<div class="slds-section__content">
<p>Section 2 Content</p>
</div>
</div>
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon–left">
<use xlink:href="{!$Resource.SLDS203}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
Section Title 3
</button>
</h3>
<div class="slds-section__content">
<p>Section 3 Content</p>
</div>
</div>
<!–Multiple Sections End–>
</fieldset>
</div>
<script>
/*SLDS Sections*/
j$(‘.slds-section__content’).hide();
j$(‘.slds-section__title’).find(‘button’).find(‘svg’).css(‘transition’, ‘0.3s’);
j$(‘.slds-section__title’).click(function(){
if(j$(this).parent().parent().hasClass(‘Minerva18SectionGroupSingle’)){
if(j$(this).parent().hasClass(‘slds-is-open’)){
j$(this).parent().removeClass(‘slds-is-open’);
j$(this).parent().find(‘.slds-section__content’).hide();
}
else{
j$(this).parent().parent().find(‘.slds-section’).removeClass(‘slds-is-open’);
j$(this).parent().parent().find(‘.slds-section__content’).hide();
j$(this).parent().toggleClass(‘slds-is-open’);
j$(this).parent().find(‘.slds-section__content’).show();
}
}
else{
j$(this).parent().toggleClass(‘slds-is-open’);
if(j$(this).parent().hasClass(‘slds-is-open’)){
j$(this).parent().find(‘.slds-section__content’).show();
}else{
j$(this).parent().find(‘.slds-section__content’).hide();
}
}
});
/*SLDS Sections*/
</script>
</html>
</apex:page>
And it will look like this:
The main javascript/jQuery code are Lines 108 to 131 in the code snippet above can make the SLDS Section Expandable/Collapsible.
If you only want one section to be open at a time, wrap all your sections in adivwith its class asMinerva18SectionGroupSingleas shown in the above code (Lines 19 to 59)
You just have to include those 24 lines of code(Lines 108 to 131 in the code snippet above) and it will take care of the rest.
There it is! We just made the Lightning Design System Sections switchable using jQuery.
Awesome, Right?
If you like the content, give it some sharing 🙂