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 |
المشاركات
إرسال تعليق