Woodlands.co.uk Component Library

Accordion

Accordion

Uses Accordion.

<div class="accordion">

    <div class="accordion__item">
        <h2 class="accordion__item__title" tabindex="0">Accordion #1</h2>
        <div class="accordion__item__content">
            <div>
                <p>Odit iste maiores mollitia amet nisi possimus. Dolorem harum qui deserunt. Et nihil numquam optio illo distinctio suscipit laboriosam autem. Dolorem eos occaecati non.</p>
            </div>
        </div>
    </div>
    <div class="accordion__item">
        <h2 class="accordion__item__title" tabindex="0">Accordion #2</h2>
        <div class="accordion__item__content">
            <div>
                <p>Quo qui voluptatem rerum deleniti. Ducimus voluptatem sit fugiat est. Quos aliquid consequuntur iste in voluptas consequatur quisquam. Eum consequuntur asperiores.</p>
            </div>
        </div>
    </div>
    <div class="accordion__item">
        <h2 class="accordion__item__title" tabindex="0">Accordion #3</h2>
        <div class="accordion__item__content">
            <div>
                <p>Doloremque fugit sit. Dolore aliquam molestias nihil nisi enim. Fugiat quod suscipit facilis sint vel vel suscipit omnis.</p>
            </div>
        </div>
    </div>
    <div class="accordion__item">
        <h2 class="accordion__item__title" tabindex="0">Accordion #4</h2>
        <div class="accordion__item__content">
            <div>
                <p>Ullam recusandae ipsam odit ab quaerat eum. Ea voluptatem quibusdam optio possimus modi eos occaecati. A ea quis vel. Est eligendi consectetur quae reiciendis. Laborum blanditiis dolorum sint ex. Sequi voluptatem voluptatum hic inventore reprehenderit id quasi accusamus.</p>
            </div>
        </div>
    </div>
    <div class="accordion__item">
        <h2 class="accordion__item__title" tabindex="0">Accordion #5</h2>
        <div class="accordion__item__content">
            <div>
                <p>Adipisci at quasi quod qui molestias nam recusandae repellat nemo. Quia vero voluptatem qui et nisi accusantium nemo qui provident. Molestiae et enim et tempora eum aspernatur.</p>
            </div>
        </div>
    </div>
    <div class="accordion__item">
        <h2 class="accordion__item__title" tabindex="0">Accordion #6</h2>
        <div class="accordion__item__content">
            <div>
                <p>Doloribus tempora quos placeat eius et qui odit nostrum rerum. Molestiae hic velit tenetur at eaque officia. Vero quae sed corrupti.</p>
            </div>
        </div>
    </div>
</div>
 
<div class="accordion">
  {{#if title}}
  <h3 class="accordion__title">{{ title }}</h3>
  {{/if}}

  {{#each items }}
  <div class="accordion__item">
    <h2 class="accordion__item__title" tabindex="0">{{ title }}</h2>
    <div class="accordion__item__content">
      <div>
        <p>{{ text }}</p>
      </div>
    </div>
  </div>
  {{/each}}
</div>