accordion slds

<div class="slds-card">
  <ul class="slds-accordion">
    <li class="slds-accordion__list-item">
      <section class="slds-accordion__section slds-is-open">
        <div class="slds-accordion__summary">
          <h2 class="slds-accordion__summary-heading">
            <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-21" aria-expanded="true" title="Accordion summary">
              <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-accordion__summary-content">Accordion summary</span>
            </button>
          </h2>
        </div>
        <div class="slds-accordion__content" id="referenceId-21">Accordion details - A</div>
              <div class="slds-accordion__content" id="referenceId-21">Accordion details - A</div>

      </section>
    </li>
    <li class="slds-accordion__list-item">
      <section class="slds-accordion__section">
        <div class="slds-accordion__summary">
          <h2 class="slds-accordion__summary-heading">
            <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-22" aria-expanded="false" title="Accordion summary">
              <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-accordion__summary-content">Accordion summary</span>
            </button>
          </h2>
        </div>
        <div hidden="" class="slds-accordion__content" id="referenceId-22">Accordion details - B</div>
      </section>
    </li>
    <li class="slds-accordion__list-item">
      <section class="slds-accordion__section">
        <div class="slds-accordion__summary">
          <h2 class="slds-accordion__summary-heading">
            <button class="slds-button slds-button_reset slds-accordion__summary-action" aria-controls="referenceId-23" aria-expanded="false" title="Accordion summary">
              <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-accordion__summary-content">Accordion summary</span>
            </button>
          </h2>
        </div>
        <div hidden="" class="slds-accordion__content" id="referenceId-23">Accordion details - C</div>
      </section>
    </li>
  </ul>
</div>