Expandable Section not working in Lightning

Question

I'm trying to do an expandable section, but the collapse and expand buttons don't seem to be working:

<aura:component >
<div class="slds-section slds-is-open">
    <h3 class="slds-section__title slds-theme_shade">
        <button aria-controls="divContent" aria-expanded="true" class="slds-button slds-section__title-action">
            <lightning:icon aura:id="articleOne" iconName="utility:switch" size="xx-small" alternativeText="switch"/>
            <span class="slds-truncate" title="Section Title">Ponto de Venda</span>
        </button>
    </h3>
    <div class="slds-section__content" aria-hidden="false" id="divContent">
        <div class="slds-form slds-form_compound" style="width:40%;">
            <fieldset class="slds-form-element">
                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <div class="slds-form-element slds-size_1-of-2">
                            <label class="slds-form-element__label" for="input-01">PDV</label>
                            <input type="text" id="input-01" class="slds-input" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>
</aura:component>

The link I have used for reference:

https://www.lightningdesignsystem.com/components/expandable-section/

Answer 1

In ligtning design system only html of components are given. So to create a working component you need to make few changes

<aura:component > <div class="{! 'slds-section' + (v.isexpanded ? ' slds-is-open' : '')}">
    <h3 class="slds-section__title slds-theme_shade">
        <button aria-controls="divContent" aria-expanded="{!v.isexpanded}" onclick="{!c.changeState}" class="slds-button slds-section__title-action">
            <lightning:icon aura:id="articleOne" iconName="utility:switch" size="xx-small" alternativeText="switch"/>
            <span class="slds-truncate" title="Section Title">Ponto de Venda</span>
        </button>
    </h3>
    <div class="slds-section__content" aria-hidden="{!!v.isexpanded}" id="divContent">
        <div class="slds-form slds-form_compound" style="width:40%;">
            <fieldset class="slds-form-element">
                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <div class="slds-form-element slds-size_1-of-2">
                            <label class="slds-form-element__label" for="input-01">PDV</label>
                            <input type="text" id="input-01" class="slds-input" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div> </div> 

in js write a method

    changeState : function changeState (component){ 
   component.set('v.isexpanded',!component.get('v.isexpanded'));
 }

As given in link of lightning design system the closing and opening of component is controllered by

Button:

aria-controls is used to create an association between the button and the section. If the section has an id="content", then the button should have aria-controls="content".

aria-expanded indicates if the section is open or closed and is read aloud by assitive technology when the button is focused. Section:

aria-hidden indicates if the section is open or closed, and if set to true, assistive technology hides the section

.

Answer 2

To use Javascript and a lightning web component instead of aura you can use a dynamic class change variable for the section.

<template>
    <div id="ExpandableCalendarSection" class={BookCalClass}>
    <h3 class="slds-section__title" style='padding-bottom:0;'>
      <button aria-controls="expandoBookingCalendar" aria-expanded="true" class="slds-button slds-section__title-action" onclick={ExpBookCalendar}>
        <lightning-icon icon-name="utility:switch"
        alternative-text="button icon"
        size="x-small"
        class="slds-section__title-action-icon slds-button__icon_left"></lightning-icon>
        <span class="slds-truncate" title="Section Title">Booking /Avaiability Calendar</span>
      </button>
    </h3>
    <div aria-hidden="false" class="slds-section__content" id="expandoBookingCalendar" style='padding-top:0;'>
        <div class="slds-grid">
           <p> Info inside expandable section </p>
          </div>
    </div>
  </div>
<template>

Javascript class:

export default class calendarView extends LightningElement {
@track BookCalClass = 'slds-section slds-is-open'; //this starts as section open


 ExpBookCalendar(){
     if(this.BookCalClass.includes('slds-is-open')){ // if section is open
       this.BookCalClass = 'slds-section'; //set class to close 
     }else{
       this.BookCalClass = 'slds-section slds-is-open'; //set class to be open
     }
 }
}

I pulled an example off previous code so forgive the random Id names

Answer 3

I had the same issue and I used this solution:

Lightning Component

<aura:component >
  <div class="slds-p-around--large">

 <div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionOne}">
  <section class="slds-clearfix">
    <div class="slds-float--left ">
        <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
        <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
    </div>
    <div class="slds-m-left--large">Section 1</div>
  </section>
</div>

<div class="slds-hide slds-p-around--medium" aura:id="articleOne">
  section one is ready.section one is ready.section one is ready.
  section one is ready.section one is ready.section one is ready.
  section one is ready.section one is ready.section one is ready.
</div>

<div class="slds-page-header" style="cursor: pointer;" onclick="{!c.sectionTwo}">
  <section class="slds-clearfix">
    <div class="slds-float--left">
        <lightning:icon class="slds-show" aura:id="articleTwo" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
        <lightning:icon class="slds-hide" aura:id="articleTwo" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
    </div>
    <div class="slds-m-left--large">Section 2</div>
  </section>
</div>

<div class="slds-hide slds-p-around--medium" aura:id="articleTwo">
  section Two is ready.section Two is ready.section Two is ready.
  section Two is ready.section Two is ready.section Two is ready.
  section Two is ready.section Two is ready.section Two is ready.
</div>

<div class="slds-page-header"  style="cursor: pointer;" onclick="{!c.sectionThree}">
  <section class="slds-clearfix">
    <div class="slds-float--left"> 
        <lightning:icon class="slds-show" aura:id="articleThree" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
        <lightning:icon class="slds-hide" aura:id="articleThree" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
    </div>
    <div class="slds-m-left--large">Section 3</div>
  </section>
</div>

<div aura:id="articleThree" class="slds-hide slds-p-around--medium">
  section Three is ready.section Three is ready.section Three is ready.
  section Three is ready.section Three is ready.section Three is ready.
  section Three is ready.section Three is ready.section Three is ready.
</div>

<div class="slds-page-header"  style="cursor: pointer;" onclick="{!c.sectionFour}">
  <section class="slds-clearfix">
    <div class="slds-float--left"> 
        <lightning:icon class="slds-show" aura:id="articleFour" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
        <lightning:icon class="slds-hide" aura:id="articleFour" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
    </div>
    <div class="slds-m-left--large">Section 4</div>
  </section>
</div>

<div aura:id="articleFour" class="slds-hide slds-p-around--medium">
  section Four is ready.section Four is ready.section Four is ready.
  section Four is ready.section Four is ready.section Four is ready.
  section Four is ready.section Four is ready.section Four is ready.
</div>  

JavaScript Controller

({
sectionOne : function(component, event, helper) {
   helper.helperFun(component,event,'articleOne');
},

   sectionTwo : function(component, event, helper) {
      helper.helperFun(component,event,'articleTwo');
    },

   sectionThree : function(component, event, helper) {
      helper.helperFun(component,event,'articleThree');
   },

   sectionFour : function(component, event, helper) {
      helper.helperFun(component,event,'articleFour');
   },
})

JavaScript Helper

({
helperFun : function(component,event,secId) {
  var acc = component.find(secId);
        for(var cmp in acc) {
        $A.util.toggleClass(acc[cmp], 'slds-show');  
        $A.util.toggleClass(acc[cmp], 'slds-hide');  
   }
},

})

I got from here -> http://sfdcmonkey.com/2017/06/02/collapsible-section-accordion-lightning-component/