Accordion In Salesforce

CODE:-

<ul class="slds-accordion"> <li class="slds-accordion__list-item"> <section class="slds-accordion__section slds-is-open"> <div class="slds-accordion__summary"> <h3 class="slds-accordion__summary-heading"> <button aria-controls="accordion-details-01" aria-expanded="true" class="slds-button slds-button_reset slds-accordion__summary-action"> <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use> </svg> <span class="slds-truncate" title="Accordion summary">Accordion summary</span> </button> </h3> </div> <div class="slds-accordion__content" id="accordion-details-01">Accordion details - A</div> </section> </li> <li class="slds-accordion__list-item"> <section class="slds-accordion__section"> <div class="slds-accordion__summary"> <h3 class="slds-accordion__summary-heading"> <button aria-controls="accordion-details-02" aria-expanded="false" class="slds-button slds-button_reset slds-accordion__summary-action"> <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use> </svg> <span class="slds-truncate" title="Accordion summary">Accordion summary</span> </button> </h3> </div> <div hidden="" class="slds-accordion__content" id="accordion-details-02">Accordion details - B</div> </section> </li> <li class="slds-accordion__list-item"> <section class="slds-accordion__section"> <div class="slds-accordion__summary"> <h3 class="slds-accordion__summary-heading"> <button aria-controls="accordion-details-03" aria-expanded="false" class="slds-button slds-button_reset slds-accordion__summary-action"> <svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use> </svg> <span class="slds-truncate" title="Accordion summary">Accordion summary</span> </button> </h3> </div> <div hidden="" class="slds-accordion__content" id="accordion-details-03">Accordion details - C</div> </section> </li> </ul>

Overview of CSS Classes

Selector	.slds-accordion
Summary	Initializes an accordion list with more than one section that will have its display toggled by invoking an interaction on the summary title
Support	dev-ready
Restrict	ul
Variant	True

Selector	.slds-accordion__list-item
Summary	List item for each accordion section
Restrict	.slds-accordion li

Selector	.slds-accordion__section
Summary	Each expandable panel inside of an accordion
Restrict	.slds-accordion section

Selector	.slds-accordion__summary
Summary	Summary title for each expandable panel inside of an accordion
Restrict	.slds-accordion__section div

Selector	.slds-accordion__summary-action
Summary	Actionable button inside of accordion summary that would toggle the visibility of each section
Restrict	.slds-accordion__summary button

Selector	.slds-accordion__summary-action-icon
Summary	Icon inside of actionable button within an accordion section
Restrict	.slds-accordion__summary-action svg

Selector	.slds-accordion__summary-heading
Summary	Summary title for each expandable panel inside of an accordion
Restrict	.slds-accordion__section h3

Selector	.slds-accordion__content
Summary	Each expandable panel inside of an accordion
Restrict	.slds-accordion__section div

Selector	.slds-is-open
Summary	Toggle visibility of accordion section + rotate icon
Restrict	.slds-accordion__section
Modifier	True