function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Stéphane CStéphane C 

Expandable Section with animation

Hey,

I developed a lightning component using the "Expandable Section" from SLDS. I achieve to make it open/close thanks to JS controller.

My issue is that I don't have the same animation that happen on a classic record Detail tab. I'm able to do my one animation, but I prefer to use SLDS as much as I can.

Here is my component : 
<aura:attribute name="isOpen" type="Boolean" default="true"
                    description="the section is open (true), else (false)"/>
    
    <div class="{!v.isOpen == true ? 'slds-section slds-is-open' : 'slds-section slds-is-close'}">
        <h3 class="slds-section__title">
            <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action"
                    onclick="{!c.handleClick}">
                <span class="slds-truncate" title="Section Title">Section Title</span>
            </button>
        </h3>
        <div aria-hidden="false" class="slds-section__content" id="expando-unique-iddddd">
            <p>Content goes here</p>
        </div>
    </div>
and the controller : 
handleClick : function(component, event, helper)
{
	component.set('v.isOpen', !component.get('v.isOpen'));
}

Thanks for your help

The Expandable Section Doc : https://www.lightningdesignsystem.com/components/expandable-section/
Alain CabonAlain Cabon
Hi,


ExpandableSectionApp
  
<aura:application extends="force:slds"  >
	<c:ExpandableSection  />
</aura:application>

ExpandableSection 
({
    handleClick : function(component, event, helper)
    {
        component.set('v.isOpen', !component.get('v.isOpen'));
    }
})
  
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="isOpen" type="Boolean" default="true"
                    description="the section is open (true), else (false)"/>
    
    <div class="{!v.isOpen == true ? 'slds-section slds-is-open' : 'slds-section slds-is-close'}">
        <h3 class="slds-section__title">
            <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action"
                    onclick="{!c.handleClick}">
                <span class="slds-truncate" title="Section Title">Section Title</span>
            </button>
        </h3>
        <div aria-hidden="false" class="slds-section__content" id="expando-unique-iddddd">
            <p>Content goes here</p>
        </div>
    </div>
    
    <div class="{!v.isOpen == true ? 'slds-section slds-is-open' : 'slds-section'}">
        <h3 class="slds-section__title">
            <button aria-controls="expando-unique-id" aria-expanded="true" class="slds-button slds-section__title-action slds-button"
                    onclick="{!c.handleClick}" >             
                <lightning:icon iconName="{!v.isOpen == true ? 'utility:switch':'utility:chevronright'}" alternativeText="Switch" size="x-small" />           
                <span class="slds-truncate" title="Section Title">Section Title</span>
            </button>
        </h3>
        <div aria-hidden="{!v.isOpen == true}" class="slds-section__content" id="expando-unique-id">
            <div class="slds-box">
                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
            </div>
        </div>
    </div>
    
</aura:component>
Stéphane CStéphane C
Thank you Alain Cabon,
On my developer organisation I tried your code and I don't have any animation. The section just appears and the chevron just switches its orientation.

On a normal Details tab the component's content doesn't just appears, it grows and its opacity gets stronger. Futhermore the chevron should rotate and not switch.

Let me know if the problem comes from me.
Satyajeet JaragSatyajeet Jarag

Hi Stéphane C,
Kindly override below CSS classes by adding below code in style file.  
.THIS .slds-section__title-action-icon{
   transition: transform .5s ease-in-out !important;
}

.THIS .slds-section__content{    
    transition: all .5s ease-in-out !important;
}
Mark this as best answer if it resolved your problem...!

Thanks,
Satya