Accordions

This handy graphical display is how we show collapsable info to members

How we design them

  • Icon positioning - Place those icons to the left of the label. This speeds up task time (a whole 15%) and shortens the distance members have to scan
  • Icon symbol - We’re bigs fans of the plus (+) icon, so keep those chevrons and right carets to yourselves
  • Focus style - We override the default focus style so that the the entire component receives an outline rather than just the summary

Why we do this:

Designed for inclusion

  • Our accordions are 48px high - a nice big tap target
  • Since they use the <details> html element, most browsers do not require JavaScript to reveal content
  • This element also includes keyboard operation as default, so assistive tech users can toggle content easily

Browser issues

  • Safari doesn’t support flex or grid on summary elements so we wrap our summary content in an extra div
  • Internet Explorer and Microsoft Edge need the accordion polyfill to operate the open/close functionality (if not included, the accordion will appear open as default). This can be found under assets > polyfills.

How they look

1. Accordion

View demo Open in new window
Open in new window
320 x 568
View code 
    <details class="gg-c-accordion">
  <summary>
    <div class="gg-c-accordion__summary gg-u-text-speak-up">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="gg-c-accordion__marker gg-u-icon gg-u-icon--small"><path d="M15.5 6.1c-.7-.1-.7 0-2.2-.1-.7 0-1.1 0-1.8.1H9.6l-3.5-.2H4.5c-2.1.1-3.7.2-4.3.2l.1 3.1c1.7.1 2.2.3 4 .4l1.6.1 3.6.2h4.1c.8 0 .5 0 1.3.1.3 0 .4-.1.4-.1.5-.7.5-2.4.2-3.8z"/><path class="gg-c-accordion__marker-open" d="M6.1.5c-.1.7 0 .7-.1 2.2 0 .7 0 1.1.1 1.8v1.9l-.2 3.5v1.6c.1 2.1.2 3.7.2 4.3l3.1-.1c.1-1.7.3-2.2.4-4l.1-1.6.2-3.6V2.4c0-.8 0-.5.1-1.3 0-.3-.1-.4-.1-.4C9.2.2 7.5.2 6.1.5z"/></svg>
      Lorem ipsum 1
    </div>
  </summary>
  <div class="gg-c-accordion__content">
    <p>Bonnie to our Clyde. You’re always in control. Easy as pie. Nice one. goodybags. No contracts. Bonnie to our Clyde. Choose giffgaff. Hi there. goodybags.</p>
  </div>
</details>

2. Accordion open by default

View demo Open in new window
Open in new window
320 x 568
View code 
    <details class="gg-c-accordion" open>
  <summary>
    <div class="gg-c-accordion__summary gg-u-text-speak-up">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="gg-c-accordion__marker gg-u-icon gg-u-icon--small"><path d="M15.5 6.1c-.7-.1-.7 0-2.2-.1-.7 0-1.1 0-1.8.1H9.6l-3.5-.2H4.5c-2.1.1-3.7.2-4.3.2l.1 3.1c1.7.1 2.2.3 4 .4l1.6.1 3.6.2h4.1c.8 0 .5 0 1.3.1.3 0 .4-.1.4-.1.5-.7.5-2.4.2-3.8z"/><path class="gg-c-accordion__marker-open" d="M6.1.5c-.1.7 0 .7-.1 2.2 0 .7 0 1.1.1 1.8v1.9l-.2 3.5v1.6c.1 2.1.2 3.7.2 4.3l3.1-.1c.1-1.7.3-2.2.4-4l.1-1.6.2-3.6V2.4c0-.8 0-.5.1-1.3 0-.3-.1-.4-.1-.4C9.2.2 7.5.2 6.1.5z"/></svg>
      Lorem ipsum 1
    </div>
  </summary>
  <div class="gg-c-accordion__content">
    <p>Bonnie to our Clyde. You’re always in control. Easy as pie. Nice one. goodybags. No contracts. Bonnie to our Clyde. Choose giffgaff. Hi there. goodybags.</p>
  </div>
</details>

3. Accordion with icon

View demo Open in new window
Open in new window
320 x 568
View code 
    
<details class="gg-c-accordion">
  <summary>
    <div class="gg-c-accordion__summary gg-u-text-speak-up">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="gg-c-accordion__marker gg-u-icon gg-u-icon--small"><path d="M15.5 6.1c-.7-.1-.7 0-2.2-.1-.7 0-1.1 0-1.8.1H9.6l-3.5-.2H4.5c-2.1.1-3.7.2-4.3.2l.1 3.1c1.7.1 2.2.3 4 .4l1.6.1 3.6.2h4.1c.8 0 .5 0 1.3.1.3 0 .4-.1.4-.1.5-.7.5-2.4.2-3.8z"/><path class="gg-c-accordion__marker-open" d="M6.1.5c-.1.7 0 .7-.1 2.2 0 .7 0 1.1.1 1.8v1.9l-.2 3.5v1.6c.1 2.1.2 3.7.2 4.3l3.1-.1c.1-1.7.3-2.2.4-4l.1-1.6.2-3.6V2.4c0-.8 0-.5.1-1.3 0-.3-.1-.4-.1-.4C9.2.2 7.5.2 6.1.5z"/></svg>
      Lorem ipsum 1
      <svg class="gg-c-accordion__icon gg-u-icon gg-u-icon--medium" viewBox="0 0 16 16"><defs></defs><path d="M13.18 7.85c0-2.36.13-4.76 0-7.11a.33.33 0 0 0 0-.07.3.3 0 0 0-.18-.35A6.46 6.46 0 0 0 9.66.19L9 .22a13 13 0 0 0-3-.15c-.65 0-1.58 0-2 .65a.23.23 0 0 0 0 .15A.31.31 0 0 0 4 1a48.55 48.55 0 0 0-.11 6.7v3.33a23.16 23.16 0 0 0 .19 4.28.19.19 0 0 0 .22.17c1.16.86 3.32.25 4.63.17 1-.06 2.72.46 3.65-.15a.29.29 0 0 0 .4-.23v-.08a.31.31 0 0 0 .09-.19 62.7 62.7 0 0 0 .11-7.15zm-.79 6.85v.1c-.47.56-2.2.25-2.85.21-1.62-.08-3.51.77-5 0a26.58 26.58 0 0 0 .15-3.93V7.7A49.84 49.84 0 0 0 4.6.94l.09-.06C5.79.82 6.89.83 8 .84a5.22 5.22 0 0 0 .84 0h.22c1.08 0 2.37-.37 3.41 0-.18 2.33-.06 4.72-.05 7.06s-.15 4.46.06 6.65a.27.27 0 0 0-.1.15z"/><path class="cls-1" d="M11.91 3.62a.25.25 0 0 0-.23-.35c-2.06 0-4.12-.06-6.18 0a.2.2 0 0 0-.19.12.24.24 0 0 0 0 .19 36.67 36.67 0 0 1 .05 5.1c0 1.37-.33 3.1.25 4.38a.19.19 0 0 0 .23.11h.19a27.23 27.23 0 0 0 5.38.09.24.24 0 0 0 .2-.11.15.15 0 0 0 .07-.1 17.29 17.29 0 0 0 .13-4.34 20.65 20.65 0 0 1 .09-2.46 6.33 6.33 0 0 0 0-.88v-.56a5 5 0 0 0 .01-1.19zm-.64 4.64c0 1.48.06 3 0 4.44a26.64 26.64 0 0 0-5.27.08 6.28 6.28 0 0 1-.17-2.41V7.45a21.28 21.28 0 0 0 0-3.77c1.85 0 3.7.11 5.56.12a6.23 6.23 0 0 0 0 1 4.14 4.14 0 0 0 0 1.11c-.07.81-.13 1.57-.13 2.35z"/><path class="cls-1" d="M8.34 13.4a.71.71 0 0 0-.82.72c0 .59.65.86 1.16.78a.72.72 0 0 0 .63-.9.9.9 0 0 0-.97-.6zm.31 1a.53.53 0 0 1-.66-.3.24.24 0 0 1 .08-.26.23.23 0 0 0 .14.05c.24 0 .49-.06.63.18s-.02.31-.19.36zM7.16 2.18a15.48 15.48 0 0 0 2.63 0 .27.27 0 0 0 .28-.29.27.27 0 0 0-.28-.29 15.38 15.38 0 0 0-2.63 0 .26.26 0 0 0 0 .58z"/></svg>
    </div>
  </summary>
  <div class="gg-c-accordion__content">
    <p>Bonnie to our Clyde. You’re always in control. Easy as pie. Nice one. goodybags. No contracts. Bonnie to our Clyde. Choose giffgaff. Hi there. goodybags.</p>
  </div>
</details>

4. Multiple accordions.

View demo Open in new window
Open in new window
320 x 568
View code 
    <details class="gg-c-accordion">
  <summary>
    <div class="gg-c-accordion__summary gg-u-text-speak-up">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="gg-c-accordion__marker gg-u-icon gg-u-icon--small"><path d="M15.5 6.1c-.7-.1-.7 0-2.2-.1-.7 0-1.1 0-1.8.1H9.6l-3.5-.2H4.5c-2.1.1-3.7.2-4.3.2l.1 3.1c1.7.1 2.2.3 4 .4l1.6.1 3.6.2h4.1c.8 0 .5 0 1.3.1.3 0 .4-.1.4-.1.5-.7.5-2.4.2-3.8z"/><path class="gg-c-accordion__marker-open" d="M6.1.5c-.1.7 0 .7-.1 2.2 0 .7 0 1.1.1 1.8v1.9l-.2 3.5v1.6c.1 2.1.2 3.7.2 4.3l3.1-.1c.1-1.7.3-2.2.4-4l.1-1.6.2-3.6V2.4c0-.8 0-.5.1-1.3 0-.3-.1-.4-.1-.4C9.2.2 7.5.2 6.1.5z"/></svg>
      Lorem ipsum 1
    </div>
  </summary>
  <div class="gg-c-accordion__content">
    <p>Bonnie to our Clyde. You’re always in control. Easy as pie. Nice one. goodybags. No contracts. Bonnie to our Clyde. Choose giffgaff. Hi there. goodybags.</p>
  </div>
</details>
<details class="gg-c-accordion">
  <summary>
    <div class="gg-c-accordion__summary gg-u-text-speak-up">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="gg-c-accordion__marker gg-u-icon gg-u-icon--small"><path d="M15.5 6.1c-.7-.1-.7 0-2.2-.1-.7 0-1.1 0-1.8.1H9.6l-3.5-.2H4.5c-2.1.1-3.7.2-4.3.2l.1 3.1c1.7.1 2.2.3 4 .4l1.6.1 3.6.2h4.1c.8 0 .5 0 1.3.1.3 0 .4-.1.4-.1.5-.7.5-2.4.2-3.8z"/><path class="gg-c-accordion__marker-open" d="M6.1.5c-.1.7 0 .7-.1 2.2 0 .7 0 1.1.1 1.8v1.9l-.2 3.5v1.6c.1 2.1.2 3.7.2 4.3l3.1-.1c.1-1.7.3-2.2.4-4l.1-1.6.2-3.6V2.4c0-.8 0-.5.1-1.3 0-.3-.1-.4-.1-.4C9.2.2 7.5.2 6.1.5z"/></svg>
      Lorem ipsum 2
    </div>
  </summary>
  <div class="gg-c-accordion__content">
    <p>Bonnie to our Clyde. You’re always in control. Easy as pie. Nice one. goodybags. No contracts. Bonnie to our Clyde. Choose giffgaff. Hi there. goodybags.</p>
  </div>
</details>
<details class="gg-c-accordion">
  <summary>
    <div class="gg-c-accordion__summary gg-u-text-speak-up">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="gg-c-accordion__marker gg-u-icon gg-u-icon--small"><path d="M15.5 6.1c-.7-.1-.7 0-2.2-.1-.7 0-1.1 0-1.8.1H9.6l-3.5-.2H4.5c-2.1.1-3.7.2-4.3.2l.1 3.1c1.7.1 2.2.3 4 .4l1.6.1 3.6.2h4.1c.8 0 .5 0 1.3.1.3 0 .4-.1.4-.1.5-.7.5-2.4.2-3.8z"/><path class="gg-c-accordion__marker-open" d="M6.1.5c-.1.7 0 .7-.1 2.2 0 .7 0 1.1.1 1.8v1.9l-.2 3.5v1.6c.1 2.1.2 3.7.2 4.3l3.1-.1c.1-1.7.3-2.2.4-4l.1-1.6.2-3.6V2.4c0-.8 0-.5.1-1.3 0-.3-.1-.4-.1-.4C9.2.2 7.5.2 6.1.5z"/></svg>
      Lorem ipsum 3
    </div>
  </summary>
  <div class="gg-c-accordion__content">
    <p>Bonnie to our Clyde. You’re always in control. Easy as pie. Nice one. goodybags. No contracts. Bonnie to our Clyde. Choose giffgaff. Hi there. goodybags.</p>
  </div>
</details>

4. Previous versions

If you’re using a version of the Design System that is older than 58.1.0, your accordions will have a grey background on open:

View demo Open in new window
Open in new window
320 x 568
View code 
    <details class="gg-c-accordion">
  <summary>
    <div class="gg-c-accordion__summary gg-u-text-speak-up">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="gg-c-accordion__marker gg-u-icon gg-u-icon--small"><path d="M15.5 6.1c-.7-.1-.7 0-2.2-.1-.7 0-1.1 0-1.8.1H9.6l-3.5-.2H4.5c-2.1.1-3.7.2-4.3.2l.1 3.1c1.7.1 2.2.3 4 .4l1.6.1 3.6.2h4.1c.8 0 .5 0 1.3.1.3 0 .4-.1.4-.1.5-.7.5-2.4.2-3.8z"/><path class="gg-c-accordion__marker-open" d="M6.1.5c-.1.7 0 .7-.1 2.2 0 .7 0 1.1.1 1.8v1.9l-.2 3.5v1.6c.1 2.1.2 3.7.2 4.3l3.1-.1c.1-1.7.3-2.2.4-4l.1-1.6.2-3.6V2.4c0-.8 0-.5.1-1.3 0-.3-.1-.4-.1-.4C9.2.2 7.5.2 6.1.5z"/></svg>
      Lorem ipsum 1
    </div>
  </summary>
  <div class="gg-c-accordion__content">
    <p>Bonnie to our Clyde. You’re always in control. Easy as pie. Nice one. goodybags. No contracts. Bonnie to our Clyde. Choose giffgaff. Hi there. goodybags.</p>
  </div>
</details>