City of Tampa Style Guide

Accordion Single 2.2

Toggle example guides Toggle HTML markup

A simple accordion example with configurable icon indicator. Icon options by default are +/- other options are .hide-icon, .lock-icon, and .chevron-icon. This example is different from the accordion group because these are individual non-related accordion examples.

When to use: If users will not likely need the hidden content and the hidden content does not contain important information OR you purposely want to hide content behind a user interaction such as a click on a button.

When not to: If its important the hidden content is discoverable, find another means to display your information.

Notes: Content hidden in accordions hurts SEO, is not indexed by search engines and is hidden from assistive technologies by default.

Dev Notes: Styles are attached to the aria tags instead of classes to ensure accessibility standards are implemented.

<insert-markup>components.accordionsingle-</insert-markup>
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
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
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion">
    <button id="headingOne" class="accordion__button" type="button" data-toggle="collapse" data-target="#collapseSingleOne" aria-expanded="false" aria-controls="collapseOne">
    Basic Accordion Defaults to +/-
    </button>
    <div id="collapseSingleOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
        craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
</div>
 <div class="accordion">
    <button id="headingTwo" class="accordion__button hide-icon" type="button" data-toggle="collapse" data-target="#collapseSingleTwo" aria-expanded="false" aria-controls="collapseTwo">
    .hide-icon Accordion
    </button>
    <div id="collapseSingleTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
        truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
    </div>
</div>
<div class="accordion">
    <button id="heading3" class="accordion__button chevron-icon" type="button" data-toggle="collapse" data-target="#collapseSingle3" aria-expanded="false" aria-controls="collapse3">
    .chevron-icon Accordion
    </button>
    <div id="collapseSingle3" class="collapse" aria-labelledby="heading3" data-parent="#accordionExample">
        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
    </div>
</div>
<div class="accordion">
    <button id="heading4" class="accordion__button lock-icon" type="button" data-toggle="collapse" data-target="#collapseSingle4" aria-expanded="false" aria-controls="collapse4">
    .lock-icon Accordion
    </button>
    <div id="collapseSingle4" class="collapse" aria-labelledby="heading4" data-parent="#accordionExample">
        craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
</div>
Source: src/scss/base/_components.scss, line 74