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/

Challenge Not yet complete... here's what's wrong: 
The getBoats() method isn't working properly. Define getBoats() In the BoatSearchResults Apex controller to accept an optional boatTypeId and return all boats if no boatTypeId is passed, and a filtered list of boats if a boatTypeId is passed.

getting this error