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
FilikinFilikin 

Using Accordion in Lightning Design System

Hi,
the LDS documentation has a component called Accordion and in the developer guidelines section it gives an example https://www.lightningdesignsystem.com/components/accordion/?variant=base

It sounds like a stupid question, but is this example meant to work?
Should I be able to copy the code straight into a new componet and see the effect, or is there more code I have to put around this that is not shown?

 
Best Answer chosen by Filikin
FilikinFilikin
Ended up writing my own verison, showing and hiding the sections using the javascript controller

All Answers

GauravGargGauravGarg

Hi,

Salesforce provided the working model of the Accordion in the guidelines, you can just try the same code within the component. 

Thansk,

Gaurav
FilikinFilikin
Hi Gaurav,
are you refering to https://www.lightningdesignsystem.com/components/accordion/?variant=base
as this doesn't work for me, I copied and pasted this code into a new component, looks nice but does nothing
GauravGargGauravGarg
Ok, I will try this out on my org and will provide the working code. 
FilikinFilikin
Ended up writing my own verison, showing and hiding the sections using the javascript controller
This was selected as the best answer
Bao Nguyen 30Bao Nguyen 30
@Filikin, would you please kindly share your code snippet? I'm stuck with this issue as well.
FilikinFilikin
Hi, I am not sure I every got this working to the customer's satisfaction, but here is what I was trying.
A building consisted of a number of areas and an area contained a number of items that had to be checked.
To the building component had 
              <ul class="slds-accordion">
            <aura:iteration items="{!v.lstKey}" var="key" indexVar="thisindex">
                <li class="slds-accordion__list-item" >
                     <c:BuildingAreaList mapItems="{!v.itemsMap}" key="{!key}"/>
                </li>
            </aura:iteration>
            </ul>
with the code to load and save the records
The area had a handler to count the number of items checked and then to hide if they were all checked:
    <aura:handler name="itemSelected"  event="c:buildingItemDone" action="{!c.buildingItemSelected}"/>
       <div aria-hidden="false" class="slds-accordion__content" id="{!v.key}">
            <aura:iteration items="{!v.lstItems}" var="item">
                <c:BuildingCheckItem itemCheck="{!item}"/>
            </aura:iteration>
         </div>
    buildingItemSelected : function (component, event, helper)
    {
        var itemCount = component.get("v.itemCount");
        itemCount--;
        component.set("v.itemCount", itemCount);
        if (itemCount <= 0)
        {
               $A.util.addClass(component, 'invisible'); 
        }
    },
Then the building check item, had a handler to hide it if on of the radio buttons on it was pressed (to indicate that it had been checked:
              <div class="slds-radio_button-group">
                <aura:iteration items="{!v.statuses}" var="statusValue">
                      <span class="slds-button slds-radio_button">
                        <ui:inputRadio change="{!c.onStatusRadio}" aura:id="status" name="radio" label="{!statusValue}" labelClass="slds-radio_button__label slds-radio_faux"/>
                      </span>
                </aura:iteration>
           </div>

    onStatusRadio : function(component, event, helper) 
    {
        helper.itemSelected (component);
    },
Helper:
    itemSelected : function(component) 
    {
       $A.util.addClass(component, 'invisible'); 
        var selectedEvent = component.getEvent("itemSelected");
        selectedEvent.fire();
    }