City of Tampa Style Guide

Accordion Group 2.1

A collapsible group of content. This is a good pattern if you need to present multiple single pieces of content. And you don't anticipate a user will need all the information at once.

When to use: If users will only need a few specific piece of content.

When not to: If users need to see most or all of the information. Use well-formatted text instead.

Notes: Content hidden in accordions hurts SEO and is not indexed by search crawlers.

Dev Notes: remove the `data-parent` attribute to remove the limit of only having one open at a time.

<insert-markup>components.accordion-</insert-markup>

Accordion Group

An accordion group only shows one item at a time.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="d-flex align-items-end pb-1">
    <div class="flex-grow-1">
        <div class="h2">Accordion Group</div>
        <div class="accordion-body">An accordion group only shows one item at a time. </div>
    </div>
    <div><button class="btn btn-outline-primary accordion-group__control" data-accordionid="#accordionGroupExample">Expand All</button></div>
</div>
<div class="accordion" id="accordionGroupExample">
  <div class="card">
      <div class="card-header bg-primary" id="headingOne">
          <h2 class="mb-0 h4">
              <button class="accordion__button text-white text-shadow" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
          </h2>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionGroupExample">
          <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
              craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
      </div>
  </div>
  <div class="card">
      <div class="card-header bg-primary" id="headingTwo">
          <h2 class="mb-0 h4">
              <button class="accordion__button text-white text-shadow" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
          </h2>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionGroupExample">
          <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
              craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
      </div>
  </div>
  <div class="card">
      <div class="card-header bg-primary" id="headingThree">
          <h2 class="mb-0 h4">
              <button class="accordion__button text-white text-shadow" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
          </h2>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionGroupExample">
          <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
              craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
      </div>
  </div>
</div>

Source: src/scss/base/_components.scss, line 1