1

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/

7

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

.

  • 1
    slds-is-open should be controlled by v.isexpanded as well. – sfdcfox Nov 27 '17 at 19:53
  • @sfdcfox yes i have updated my answer – Manjot Singh Nov 27 '17 at 19:59
  • That's make sense, but still don't working and hasn't log to I discover why. – Guilherme Andrade Nov 27 '17 at 20:08
  • a space was missing between {! 'slds-section' + (v.isexpanded ? ' slds-is-open' : '')}" so i added it will work now – Manjot Singh Nov 27 '17 at 20:37
  • Don't work anyway. I chose to remove expand/collapse button, but thanks for your time. – Guilherme Andrade Nov 30 '17 at 18:36
1

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

0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.