Source code

src/showcase/pages/components/accordion.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the accordions component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentAccordion"}'
  ></include>
  <div class="catalog-grid">
    <article class="card">
      <header class="card-header"><h2 x-text="$t('accordion')"></h2></header>
      <div class="card-body">
        <div
          class="accordion"
          x-data="uiAccordion(panels, { multiple: false })"
          x-id="['accordion']"
          @keydown="navigate"
        >
          <template x-for="panel in panels" :key="panel">
            <div class="accordion-item">
              <h3 class="accordion-header">
                <button
                  class="accordion-button"
                  :class="{ collapsed: !isOpen(panel) }"
                  data-accordion-trigger
                  :id="$id('accordion') + '-' + panel"
                  :aria-expanded="isOpen(panel)"
                  :aria-controls="$id('accordion') + '-body-' + panel"
                  @click="toggle(panel)"
                  x-text="$t(panel)"
                ></button>
              </h3>
              <div
                role="region"
                :id="$id('accordion') + '-body-' + panel"
                :aria-labelledby="$id('accordion') + '-' + panel"
                x-show="isOpen(panel)"
                x-cloak
              >
                <div class="accordion-body" x-text="$t(panel + 'Body')"></div>
              </div>
            </div>
          </template>
          <div class="accordion-item">
            <h3 class="accordion-header">
              <button
                class="accordion-button collapsed"
                data-accordion-trigger
                disabled
                x-text="$t('disabled')"
              ></button>
            </h3>
          </div>
        </div>
      </div>
    </article>
    <article class="card">
      <header class="card-header"><h2 x-text="$t('galleryMultiple')"></h2></header>
      <div class="card-body">
        <div
          class="accordion"
          x-data="uiAccordion(panels, { multiple: true })"
          x-id="['accordion']"
          @keydown="navigate"
        >
          <template x-for="panel in panels" :key="panel">
            <div class="accordion-item">
              <h3 class="accordion-header">
                <button
                  class="accordion-button"
                  :class="{ collapsed: !isOpen(panel) }"
                  data-accordion-trigger
                  :id="$id('accordion') + '-' + panel"
                  :aria-expanded="isOpen(panel)"
                  :aria-controls="$id('accordion') + '-body-' + panel"
                  @click="toggle(panel)"
                  x-text="$t(panel)"
                ></button>
              </h3>
              <div
                role="region"
                :id="$id('accordion') + '-body-' + panel"
                :aria-labelledby="$id('accordion') + '-' + panel"
                x-show="isOpen(panel)"
                x-cloak
              >
                <div class="accordion-body" x-text="$t(panel + 'Body')"></div>
              </div>
            </div>
          </template>
          <div class="accordion-item">
            <h3 class="accordion-header">
              <button
                class="accordion-button collapsed"
                data-accordion-trigger
                disabled
                x-text="$t('disabled')"
              ></button>
            </h3>
          </div>
        </div>
      </div>
    </article>
    <article class="card">
      <header class="card-header"><h2 x-text="$t('galleryCollapse')"></h2></header>
      <div class="card-body">
        <details class="accordion-example mt-4">
          <summary x-text="$t('galleryCollapse')"></summary>
          <p class="text-muted mt-3" x-text="$t('galleryPanelReuseBody')"></p>
        </details>
      </div>
    </article>
  </div>
</section>