Creating Expandable / Collapsible Lightning Design Sections In Salesforce

Hello There! Welcome Back 🙂

In this blog we are gonna make the Lightning Design System “Sections” component interactive(Expandable/Collapsible sections).

Let’s get started!

Things we will be using:
1) The Salesforce Lightning Design System
2) jQuery

Step 1: Gathering the resources we need.

  1. Salesforce Lightning Design System:
    1) 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.
    2) The file you download will be named “salesforce-lightning-design-system.zip”, just rename it to something convenient and short like “SLDS”.
    3) Upload the zip file as your Static Resource.
  2. jQuery:
    We will be using CDN for this here, you can always have it as a static resource. Either way is fine.
    <script src="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.

1. Set the StandardStylesheets to false and doctype to html-5.0 (Code: Line 1)
2. We put all the resources we need into the page and set jQuery to noConflict mode.(Code: Lines 2 to 8)
3. Now, there are two types of these sections, i.e,
a) Only one section open at a time (Code: Lines 19 to 59),
b) Multiple Sections open (Code: Lines 65 to 102).
4. Create SLDS Section Component as shown in the SLDS website here, without the slds-is-open class for the parent div with class slds-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.
5. 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 a div with its class as Minerva18SectionGroupSingle as 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?
I have also created a demo page so that you can play around with it yourself: http://minerva18-developer-edition.ap2.force.com/Demos/SLDSSectionsJS

Check out my other blog on Creating Switchable Lightning Design Tabs In Salesforce

Let me know in the comments below for which components you would want javascript for.

If you like the content, give it some sharing 🙂

Happy Coding 😀
For more Salesforce Content, Please Like & Subscribe to My Facebook Page and Youtube Channel with the links below.
Thank you, See you in the next one & Peace 😀


Stay update with our latest posts by subscribing to our newsletter. It is free!




2 thoughts on “Creating Expandable / Collapsible Lightning Design Sections In Salesforce”

Leave a Reply

Your email address will not be published.