SDC Pattern Library

Accordion

Accordion

List of items with collapsable content with buttons to expand content.

Accordion Class

  • Create an instance with a madatory trackEvent Function parameter

Module

  • Optionally pass a trackEvent function to be instantiated with every Accordion instance created (not configurable before calling domready).

Usage

Use class composition in the HTML DOM to define component elements

Applies to whole accordion

  • js-accordion Root accordion element (Mandatory - define an accordion component instance/scope)
  • js-accordion-content Accordion content area (Mandatory - define all accordion content)
  • js-accordion-open-all Text label and trigger to expand all accordion segments
  • js-accordion-close-all Text label and trigger to collapse all accordion segments

Applies to each segment

  • js-accordion-title A title/button trigger for a single accordion segment
  • js-accordion-body The expanding/collapsing content body for a single accordion segment
  • js-accordion-preview Text label shown alongside title to describe content-expanding action when closed
  • js-accordion-close Text label shown alongside title to describe content-collapsing action when open
<!-- Default -->
<div class="accordion js-accordion">
    <dl class="js-accordion-content">
        <dt class="accordion__title venus js-accordion-title" data-js-accordion-event-label="Total retail turnover">
      <span tabindex="0">Total retail turnover</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-preview u-hidden " aria-hidden="true">Show</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-close u-hidden" aria-hidden="true">Hide</span>
    </dt>
        <dd class="accordion__body mars js-accordion-body">
            <div class="u-mb-s">
                <div class="u-mb-s">Include:</div>
                <ul>
                    <li>VAT</li>
                    <li>internet sales</li>
                    <li>retail sales from outlets in Great Britain to customers abroad</li>
                </ul>
            </div>
            <div class="u-mb-s">
                <div class="u-mb-s">Exclude:</div>
                <ul>
                    <li>revenue from mobile phone network commission and top-up</li>
                    <li>sales from catering facilities used by customers</li>
                    <li>lottery sales and commission from lottery sales</li>
                    <li>sales of car accessories and motor vehicles</li>
                    <li>NHS receipts</li>
                    <li>automotive fuel</li>
                </ul>
            </div>
        </dd>

        <dt class="accordion__title venus js-accordion-title" data-js-accordion-event-label="Food sales">
      <span tabindex="0">Food sales</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-preview u-hidden " aria-hidden="true">Show</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-close u-hidden" aria-hidden="true">Hide</span>
    </dt>
        <dd class="accordion__body mars js-accordion-body">
            <div class="u-mb-s">
                <div class="u-mb-s">Include:</div>
                <ul>
                    <li>all fresh food</li>
                    <li>other food for human consumption (except chocolate and sugar confectionery)</li>
                    <li>soft drinks</li>
                </ul>
            </div>
            <div class="u-mb-s">
                <div class="u-mb-s">Exclude:</div>
                <ul>
                    <li>sales from catering facilities used by customers</li>
                </ul>
            </div>
        </dd>

        <dt class="accordion__title venus js-accordion-title" data-js-accordion-event-label="Alcohol, confectionery and tobacco sales">
      <span tabindex="0">Alcohol, confectionery and tobacco sales</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-preview u-hidden " aria-hidden="true">Show</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-close u-hidden" aria-hidden="true">Hide</span>
    </dt>
        <dd class="accordion__body mars js-accordion-body">
            <div class="u-mb-s">
                <div class="u-mb-s">Include:</div>
                <ul>
                    <li>chocolate and sugar confectionery</li>
                    <li>tobacco and smokers’ requisites</li>
                </ul>
            </div>
        </dd>
    </dl>
</div>


<!-- With Preview -->
<div class="accordion js-accordion">
    <div class="mars accordion__controls">
        <a class="accordion__control js-accordion-open-all u-hidden" data-ga="click" data-ga-category="Preview Survey" data-ga-action="Show all" tabindex="0" aria-hidden="true">Show all</a>
        <a class="accordion__control js-accordion-close-all u-hidden" data-ga="click" data-ga-category="Preview Survey" data-ga-action="Hide all" tabindex="0" aria-hidden="true">Hide all</a>
    </div>
    <dl class="js-accordion-content">
        <dt class="accordion__title venus js-accordion-title" data-js-accordion-event-label="Total retail turnover">
      <span tabindex="0">Total retail turnover</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-preview u-hidden " aria-hidden="true">Show</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-close u-hidden" aria-hidden="true">Hide</span>
    </dt>
        <dd class="accordion__body mars js-accordion-body">
            <div class="u-mb-s">
                <div class="u-mb-s">Include:</div>
                <ul>
                    <li>VAT</li>
                    <li>internet sales</li>
                    <li>retail sales from outlets in Great Britain to customers abroad</li>
                </ul>
            </div>
            <div class="u-mb-s">
                <div class="u-mb-s">Exclude:</div>
                <ul>
                    <li>revenue from mobile phone network commission and top-up</li>
                    <li>sales from catering facilities used by customers</li>
                    <li>lottery sales and commission from lottery sales</li>
                    <li>sales of car accessories and motor vehicles</li>
                    <li>NHS receipts</li>
                    <li>automotive fuel</li>
                </ul>
            </div>
        </dd>

        <dt class="accordion__title venus js-accordion-title" data-js-accordion-event-label="Food sales">
      <span tabindex="0">Food sales</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-preview u-hidden " aria-hidden="true">Show</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-close u-hidden" aria-hidden="true">Hide</span>
    </dt>
        <dd class="accordion__body mars js-accordion-body">
            <div class="u-mb-s">
                <div class="u-mb-s">Include:</div>
                <ul>
                    <li>all fresh food</li>
                    <li>other food for human consumption (except chocolate and sugar confectionery)</li>
                    <li>soft drinks</li>
                </ul>
            </div>
            <div class="u-mb-s">
                <div class="u-mb-s">Exclude:</div>
                <ul>
                    <li>sales from catering facilities used by customers</li>
                </ul>
            </div>
        </dd>

        <dt class="accordion__title venus js-accordion-title" data-js-accordion-event-label="Alcohol, confectionery and tobacco sales">
      <span tabindex="0">Alcohol, confectionery and tobacco sales</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-preview u-hidden " aria-hidden="true">Show</span><span class="mars accordion__title-right accordion-unhide@m js-accordion-close u-hidden" aria-hidden="true">Hide</span>
    </dt>
        <dd class="accordion__body mars js-accordion-body">
            <div class="u-mb-s">
                <div class="u-mb-s">Include:</div>
                <ul>
                    <li>chocolate and sugar confectionery</li>
                    <li>tobacco and smokers’ requisites</li>
                </ul>
            </div>
        </dd>
    </dl>
</div>


/* Default: No context defined */


/* With Preview: No context defined */