{{#> web/layout/default title="Accordion" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Basic Usage</h2>

    <div class="docs-Stack docs-Stack--start">

      <!-- Accordion: start -->
      <section class="Accordion">

        <!-- Accordion item: start -->
        <article id="example-1-item-1" class="Accordion__item">

          <h3 id="example-1-item-1-header" class="Accordion__itemHeader">
            <button
              type="button"
              class="Accordion__itemToggle"
              data-spirit-toggle="collapse"
              data-spirit-target="example-1-item-1-collapse"
              aria-expanded="true"
            >
              Accordion Item no. 1
            </button>
            <span class="Accordion__itemSide">
              <span class="Accordion__itemIcon">
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                </svg>
              </span>
            </span>
          </h3>

          <div
            id="example-1-item-1-collapse"
            class="Collapse is-open"
            aria-labelledby="example-1-item-1-header"
          >
            <div class="Collapse__content">
              <div class="Accordion__content">

                <!-- Content: start -->
                Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio
                leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean
                aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin
                ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris
                posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque.
                Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean
                efficitur.
                <!-- Content: end -->

              </div>
            </div>
          </div>

        </article>
        <!-- Accordion item: end -->

        <!-- Accordion item: start -->
        <article id="example-1-item-2" class="Accordion__item">

          <h3 id="example-1-item-2-header" class="Accordion__itemHeader">
            <button
              type="button"
              class="Accordion__itemToggle"
              data-spirit-toggle="collapse"
              data-spirit-target="example-1-item-2-collapse"
              aria-expanded="false"
            >
              Accordion Item no. 2
            </button>
            <span class="Accordion__itemSide">
              <span class="Accordion__itemSlot">

                <!-- Slot content: start -->
                <a href="https://spirit.design">Link</a>
                <span class="Pill Pill--selected">3</span>
                <!-- Slot content: end -->

              </span>
              <span class="Accordion__itemIcon">
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                </svg>
              </span>
            </span>
          </h3>

          <div
            id="example-1-item-2-collapse"
            class="Collapse"
            aria-labelledby="example-1-item-2-header"
          >
            <div class="Collapse__content">
              <div class="Accordion__content">

                <!-- Content: start -->
                Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque non
                nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum consectetur
                porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare fermentum et
                vehicula. Consequat bibendum, dui fusce gravida iaculis urna integer vitae id, ante purus nullam et nisl. Accumsan
                arcu, nunc nulla faucibus purus vivamus facilisis augue, volutpat convallis eget suscipit. Tellus nunc ut enim et,
                urna fusce pulvinar fusce et mauris donec, vitae odio morbi risus aliquet. et.
                <!-- Content: end -->

              </div>
            </div>
          </div>

        </article>
        <!-- Accordion item: end -->

        <!-- Accordion item: start -->
        <article id="example-1-item-3" class="Accordion__item">

          <h3 id="example-1-item-3-header" class="Accordion__itemHeader">
            <button
              type="button"
              class="Accordion__itemToggle"
              data-spirit-toggle="collapse"
              data-spirit-target="example-1-item-3-collapse"
              aria-expanded="false"
            >
              Accordion Item no. 3
            </button>
            <span class="Accordion__itemSide">
              <span class="Accordion__itemIcon">
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                </svg>
              </span>
            </span>
          </h3>

          <div
            id="example-1-item-3-collapse"
            class="Collapse"
            aria-labelledby="example-1-item-3-header"
          >
            <div class="Collapse__content">
              <div class="Accordion__content">

                <!-- Content: start -->
                Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio
                leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean
                aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin
                ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris
                posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque.
                Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean
                efficitur.
                <!-- Content: end -->

              </div>
            </div>
          </div>

        </article>
        <!-- Accordion item: end -->

        <!-- Accordion item: start -->
        <article id="example-1-item-4" class="Accordion__item">

          <h3 id="example-1-item-4-header" class="Accordion__itemHeader">
            <button
              type="button"
              class="Accordion__itemToggle"
              data-spirit-toggle="collapse"
              data-spirit-target="example-1-item-4-collapse"
              aria-expanded="false"
            >
              Augue iaculis, quis ante sapien aliquam aliquam non cursus, vestibulum nunc ipsum maximus.
              Libero sed non nulla, condimentum lorem ipsum molestie integer curabitur rutrum curabitur,
              tellus pulvinar libero tempus
            </button>
            <span class="Accordion__itemSide">
              <span class="Accordion__itemSlot">

                <!-- Slot content: start -->
                <span class="Pill Pill--selected">3</span>
                <!-- Slot content: end -->

              </span>
              <span class="Accordion__itemIcon">
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                </svg>
              </span>
            </span>
          </h3>

          <div
            id="example-1-item-4-collapse"
            class="Collapse"
            aria-labelledby="example-1-item-4-header"
          >
            <div class="Collapse__content">
              <div class="Accordion__content">

                <!-- Content: start -->
                Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque non
                nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum consectetur
                porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare fermentum et
                vehicula. Consequat bibendum, dui fusce gravida iaculis urna integer vitae id, ante purus nullam et nisl. Accumsan
                arcu, nunc nulla faucibus purus vivamus facilisis augue, volutpat convallis eget suscipit. Tellus nunc ut enim et,
                urna fusce pulvinar fusce et mauris donec, vitae odio morbi risus aliquet. et.
                <!-- Content: end -->

              </div>
            </div>
          </div>

        </article>
        <!-- Accordion item: end -->

      </section>
      <!-- Accordion: end -->

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">One Item Open at a Time</h2>

    <div class="docs-Stack docs-Stack--start">

      <!-- Accordion: start -->
      <section
        id="example-2"
        class="Accordion"
      >

        <!-- Accordion item: start -->
        <article id="example-2-item-1" class="Accordion__item">

          <h3 id="example-2-item-1-header" class="Accordion__itemHeader">
            <button
              type="button"
              class="Accordion__itemToggle"
              data-spirit-toggle="collapse"
              data-spirit-target="example-2-item-1-collapse"
              aria-expanded="false"
            >
              Accordion Item no. 1
            </button>
            <span class="Accordion__itemSide">
              <span class="Accordion__itemIcon">
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                </svg>
              </span>
            </span>
          </h3>

          <div
            id="example-2-item-1-collapse"
            class="Collapse"
            data-spirit-parent="#example-2"
            aria-labelledby="example-2-item-1-header"
          >
            <div class="Collapse__content">
              <div class="Accordion__content">

                <!-- Content: start -->
                Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio
                leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean
                aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin
                ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris
                posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque.
                Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean
                efficitur.
                <!-- Content: end -->

              </div>
            </div>
          </div>

        </article>
        <!-- Accordion item: end -->

        <!-- Accordion item: start -->
        <article id="example-2-item-2" class="Accordion__item">

          <h3 id="example-2-item-2-header" class="Accordion__itemHeader">
            <button
              type="button"
              class="Accordion__itemToggle"
              data-spirit-toggle="collapse"
              data-spirit-target="example-2-item-2-collapse"
              aria-expanded="false"
            >
              Accordion Item no. 2
            </button>
            <span class="Accordion__itemSide">
              <span class="Accordion__itemIcon">
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                </svg>
              </span>
            </span>
          </h3>

          <div
            id="example-2-item-2-collapse"
            class="Collapse"
            data-spirit-parent="#example-2"
            aria-labelledby="example-2-item-2-header"
          >
            <div class="Collapse__content">
              <div class="Accordion__content">

                <!-- Content: start -->
                Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque non
                nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum consectetur
                porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare fermentum et
                vehicula. Consequat bibendum, dui fusce gravida iaculis urna integer vitae id, ante purus nullam et nisl. Accumsan
                arcu, nunc nulla faucibus purus vivamus facilisis augue, volutpat convallis eget suscipit. Tellus nunc ut enim et,
                urna fusce pulvinar fusce et mauris donec, vitae odio morbi risus aliquet. et.
                <!-- Content: end -->

              </div>
            </div>
          </div>

        </article>
        <!-- Accordion item: end -->

        <!-- Accordion item: start -->
        <article id="example-2-item-3" class="Accordion__item">

          <h3 id="example-2-item-3-header" class="Accordion__itemHeader">
            <button
              type="button"
              class="Accordion__itemToggle"
              data-spirit-toggle="collapse"
              data-spirit-target="example-2-item-3-collapse"
              aria-expanded="false"
            >
              Accordion Item no. 3
            </button>
            <span class="Accordion__itemSide">
              <span class="Accordion__itemIcon">
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                </svg>
              </span>
            </span>
          </h3>

          <div
            id="example-2-item-3-collapse"
            class="Collapse"
            data-spirit-parent="#example-2"
            aria-labelledby="example-2-item-3-header"
          >
            <div class="Collapse__content">
              <div class="Accordion__content">

                <!-- Content: start -->
                Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio
                leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean
                aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin
                ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris
                posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque.
                Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean
                efficitur.
                <!-- Content: end -->

              </div>
            </div>
          </div>

        </article>
        <!-- Accordion item: end -->

      </section>
      <!-- Accordion: end -->

    </div>

  </div>

</section>

{{/web/layout/default }}