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>Omnis in vero dolorem facilis cupiditate aut quae est et. Ducimus magni aut quasi laboriosam est. Aut quam nihil. Molestiae praesentium accusamus et voluptatem sequi cumque enim.</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>Reprehenderit optio beatae. Maiores non modi quod magnam impedit tempore temporibus. Voluptate est velit. Quisquam dolor repudiandae. Ratione qui eos non laudantium sed eligendi officiis.</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>Neque maiores est molestiae temporibus reprehenderit rerum ratione dolorem laboriosam. Fugit ad consectetur in. Qui cupiditate nulla dolorem quaerat et maiores qui. Accusantium sequi et quasi ipsum aut aliquid doloribus.</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>Eos rerum rerum nisi dolor. Voluptatibus ut repellat explicabo nihil voluptatem maiores velit. Minima repellendus necessitatibus molestiae aut. Consequuntur sapiente incidunt est.</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>Laborum in tenetur eos. Consequatur assumenda voluptate non voluptates natus libero. Officia laboriosam in doloremque.</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>Nesciunt molestiae illum et. Et est blanditiis similique vitae recusandae repellat excepturi nihil at. Occaecati eos provident sint maiores.</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>