You need to sign in to do that
Don't have an account?
Sté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 :
Thanks for your help
The Expandable Section Doc : https://www.lightningdesignsystem.com/components/expandable-section/
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/
ExpandableSectionApp
ExpandableSection
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.
Hi Stéphane C,
Kindly override below CSS classes by adding below code in style file. Mark this as best answer if it resolved your problem...!
Thanks,
Satya