Accordion

The accordion pattern presents an expandable and collapsible section of content. Accordions shorten pages and reduce scrolling, but they require users to click on topic headings to find information. Therefore, accordions should be used sparingly. For more information see the Nielsen Norman Group report on accordion usability.

Rules for accordions

  • Must not be used when your audience needs most or all of the content on the page to answer their questions. It is better to show all page content at once when the user case supports it. In such cases, do not worry about page length.
  • May be used when only one option is relevant to the user e.g. UK, Europe, USA.
  • May be used where you want to step a user through a process e.g. step 1, step 2, step 3.
  • The content within accordions must not contain any headings higher than heading 4 level <h4>.
  • May be used anywhere in a content section.
  • Must only be used on a white or light grey background.
  • Content may be divided into columns appropriate to the width of the accordion.

Additional information for developers

Additional WAI-ARIA markup is automatically added to the accordions using JavaScript. Accordion items and their associated groups are also automatically given unique id values using javascript. This is to improve accessibility and to ensure each id is indeed unique.

Options available

Single accordion

Consider if the content would be better visible at all times before using a single accordion to hide it from the user.

This example shows a single accordion with content divided between two columns.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.

Code 
<!-- Begin pattern: accordion //-->
<div class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">St Andrews</button>
        </h3>
    </div>
    <div class="accordion-item__content"><div class='row'><div class='col-md-6'><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p></div><div class='col-md-6'><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p></div></div></div>
</div>
<!-- End pattern: accordion //-->

Accordion - group

When an accordion contains more than one item these must be grouped together, using the .accordion-group class. An optional toggle button, to open or close all items within that group, is used to reduce potential user interaction cost.

This example shows an accordion group on a light grey background.

Example

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

    • Accordions can also contain unordered lists.
    • Another list item
    • Another list item
      • This a an unordered sub-list
    • Another list item
      1. This a an ordered sub-list
    1. Numbered lists may also be used
    2. Another list item
    3. Another list item
      • This a an unordered sub-list
    4. Another list item
      1. This a an ordered sub-list

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

    • Vestibulum lacinia auctor hendrerit.
    • Vivamus vitae metus euismod, vestibulum odio eu..
    • Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat.

  • Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.

  • Quisque porttitor nisi sed justo posuere, ut sagittis lectus sodales. Proin tempus posuere libero. Quisque mauris ex, commodo vel finibus eu, iaculis id risus. Aenean id lorem vel lectus varius hendrerit vehicula quis sapien. Vestibulum non accumsan ante, et ullamcorper massa. In dictum mauris non accumsan gravida. Aliquam tortor mi, porttitor non feugiat eu, fermentum id magna. Nunc ornare mi risus, a cursus dui commodo at.

    Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat. Donec id convallis dui. Donec fringilla non justo at hendrerit. Proin dictum viverra cursus. Etiam eu viverra dui, at convallis diam. Donec finibus ut sapien ac dignissim. Nullam pulvinar mollis efficitur.

Code 
<!-- Begin pattern: accordion //-->
<button class="accordion-group__toggle">Open all</button>
<ul class="accordion-group accordion-group__toggle-container">
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">Divinity</button>
        </h3>
    </div>
    <div class="accordion-item__content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><ul><li>Accordions can also contain unordered lists.</li><li>Another list item</li><li>Another list item<ul><li>This a an unordered sub-list</li></ul></li><li>Another list item<ol><li>This a an ordered sub-list</li></ol></li></ul><ol><li>Numbered lists may also be used</li><li>Another list item</li><li>Another list item<ul><li>This a an unordered sub-list</li></ul></li><li>Another list item<ol><li>This a an ordered sub-list</li></ol></li></ol></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">Geography</button>
        </h3>
    </div>
    <div class="accordion-item__content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><ul><li>Vestibulum lacinia auctor hendrerit.</li><li>Vivamus vitae metus euismod, vestibulum odio eu..</li><li>Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat.</li></ul></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">History</button>
        </h3>
    </div>
    <div class="accordion-item__content"><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">Physics</button>
        </h3>
    </div>
    <div class="accordion-item__content"><p>Quisque porttitor nisi sed justo posuere, ut sagittis lectus sodales. Proin tempus posuere libero. Quisque mauris ex, commodo vel finibus eu, iaculis id risus. Aenean id lorem vel lectus varius hendrerit vehicula quis sapien. Vestibulum non accumsan ante, et ullamcorper massa. In dictum mauris non accumsan gravida. Aliquam tortor mi, porttitor non feugiat eu, fermentum id magna. Nunc ornare mi risus, a cursus dui commodo at.</p><p>Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat. Donec id convallis dui. Donec fringilla non justo at hendrerit. Proin dictum viverra cursus. Etiam eu viverra dui, at convallis diam. Donec finibus ut sapien ac dignissim. Nullam pulvinar mollis efficitur.</p></div>
</li>
</ul>
<!-- End pattern: accordion //-->

Accordion - group without 'open all / close all' button

This example shows an accordion group without the 'open all / close all' toggle button. This could be used when an accordion only allows one accordion item to be open at a time.

Example

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

    • Accordions can also contain unordered lists.
    • Another list item
    • Another list item
      • This a an unordered sub-list
    • Another list item
      1. This a an ordered sub-list
    1. Numbered lists may also be used
    2. Another list item
    3. Another list item
      • This a an unordered sub-list
    4. Another list item
      1. This a an ordered sub-list

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

    • Vestibulum lacinia auctor hendrerit.
    • Vivamus vitae metus euismod, vestibulum odio eu..
    • Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat.

  • Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.

  • Quisque porttitor nisi sed justo posuere, ut sagittis lectus sodales. Proin tempus posuere libero. Quisque mauris ex, commodo vel finibus eu, iaculis id risus. Aenean id lorem vel lectus varius hendrerit vehicula quis sapien. Vestibulum non accumsan ante, et ullamcorper massa. In dictum mauris non accumsan gravida. Aliquam tortor mi, porttitor non feugiat eu, fermentum id magna. Nunc ornare mi risus, a cursus dui commodo at.

    Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat. Donec id convallis dui. Donec fringilla non justo at hendrerit. Proin dictum viverra cursus. Etiam eu viverra dui, at convallis diam. Donec finibus ut sapien ac dignissim. Nullam pulvinar mollis efficitur.

Code 
<!-- Begin pattern: accordion //-->
<ul class="accordion-group">
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">Divinity</button>
        </h3>
    </div>
    <div class="accordion-item__content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><ul><li>Accordions can also contain unordered lists.</li><li>Another list item</li><li>Another list item<ul><li>This a an unordered sub-list</li></ul></li><li>Another list item<ol><li>This a an ordered sub-list</li></ol></li></ul><ol><li>Numbered lists may also be used</li><li>Another list item</li><li>Another list item<ul><li>This a an unordered sub-list</li></ul></li><li>Another list item<ol><li>This a an ordered sub-list</li></ol></li></ol></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">Geography</button>
        </h3>
    </div>
    <div class="accordion-item__content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p><ul><li>Vestibulum lacinia auctor hendrerit.</li><li>Vivamus vitae metus euismod, vestibulum odio eu..</li><li>Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat.</li></ul></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">History</button>
        </h3>
    </div>
    <div class="accordion-item__content"><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">Physics</button>
        </h3>
    </div>
    <div class="accordion-item__content"><p>Quisque porttitor nisi sed justo posuere, ut sagittis lectus sodales. Proin tempus posuere libero. Quisque mauris ex, commodo vel finibus eu, iaculis id risus. Aenean id lorem vel lectus varius hendrerit vehicula quis sapien. Vestibulum non accumsan ante, et ullamcorper massa. In dictum mauris non accumsan gravida. Aliquam tortor mi, porttitor non feugiat eu, fermentum id magna. Nunc ornare mi risus, a cursus dui commodo at.</p><p>Nullam non interdum mauris, quis molestie sem. Proin aliquam purus vel pellentesque mollis. Curabitur vitae augue at velit sollicitudin consequat. Donec id convallis dui. Donec fringilla non justo at hendrerit. Proin dictum viverra cursus. Etiam eu viverra dui, at convallis diam. Donec finibus ut sapien ac dignissim. Nullam pulvinar mollis efficitur.</p></div>
</li>
</ul>
<!-- End pattern: accordion //-->

Accordion with intro - group

Where it may be beneficial to give additional information about the contents of an accordion, before the requirement to open it, then a short introduction may be included.

  • If an accordion item has an intro then all items within that accordion group must also include an intro.
  • The length of an intro should be limited to a maximum of 80 characters.
Example

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

  • Vestibulum ac rutrum tellus, quis porttitor urna.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

  • Vestibulum ac rutrum tellus, quis porttitor urna.

    Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.

Code 
<!-- Begin pattern: accordion //-->
<button class="accordion-group__toggle">Open all</button>
<ul class="accordion-group accordion-group__toggle-container">
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">Divinity</button>
        </h3>
        <p class="accordion-item__toggle-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="accordion-item__content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">Geography</button>
        </h3>
        <p class="accordion-item__toggle-intro">Vestibulum ac rutrum tellus, quis porttitor urna.</p>
    </div>
    <div class="accordion-item__content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">History</button>
        </h3>
        <p class="accordion-item__toggle-intro">Vestibulum ac rutrum tellus, quis porttitor urna.</p>
    </div>
    <div class="accordion-item__content"><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p></div>
</li>
</ul>
<!-- End pattern: accordion //-->

Accordion with key info - group

Where there are different types of information, that would all benefit being shown immediately, these can be shown in icon / value pairs. The use of icons quickly conveys the meaning of the associated text while keeping space to a minimum.

  • Icons must be from the approved list of Font Awesome icons.
  • There must be a maximum number of three icon / value pairs used on an accordion item.
  • Icon usage must be consistent within an accordion group.
Example

  • 8.00am to 2.00am 1,200 capacity (open to all)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

  • 9.00am to 7.45pm 400 capacity (open to all students)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.

  • 9.00am to 9.45pm 400 capacity (open to all students)

    Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.

Code 
<!-- Begin pattern: accordion //-->
<button class="accordion-group__toggle">Open all</button>
<ul class="accordion-group accordion-group__toggle-container">
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">Main library</button>
        </h3>
        <span class="accordion-item__toggle-keyfact"><i class="fa fa-clock-o" aria-hidden="true"></i>8.00am to 2.00am</span>
        <span class="accordion-item__toggle-keyfact"><i class="fa fa-user-o" aria-hidden="true"></i>1,200 capacity (open to all)</span>
    </div>
    <div class="accordion-item__content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">St Mary&#x27;s College Library</button>
        </h3>
        <span class="accordion-item__toggle-keyfact"><i class="fa fa-clock-o" aria-hidden="true"></i>9.00am to 7.45pm</span>
        <span class="accordion-item__toggle-keyfact"><i class="fa fa-user-o" aria-hidden="true"></i>400 capacity (open to all students)</span>
    </div>
    <div class="accordion-item__content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac rutrum tellus, quis porttitor urna. Donec ultricies libero erat, id efficitur risus blandit nec. Donec et ipsum in dui blandit rutrum. Praesent rhoncus lobortis ligula, viverra tincidunt ante lobortis at. Sed vehicula luctus quam sit amet lacinia. Sed eu nulla vel ex tempus accumsan in sit amet metus. Vestibulum a venenatis mi. Ut ac semper arcu.</p></div>
</li>
<li class='accordion-item'>
    <div class="accordion-item__toggle">
        <h3 class="accordion-item__toggle-title">
            <button class="accordion-item__toggle-button">History</button>
        </h3>
        <span class="accordion-item__toggle-keyfact"><i class="fa fa-clock-o" aria-hidden="true"></i>9.00am to 9.45pm</span>
        <span class="accordion-item__toggle-keyfact"><i class="fa fa-user-o" aria-hidden="true"></i>400 capacity (open to all students)</span>
    </div>
    <div class="accordion-item__content"><p>Morbi pellentesque, mauris nec porta laoreet, neque magna tempor eros, eget suscipit tellus purus nec ligula. In accumsan turpis eu porttitor tempus. Praesent rutrum quam id felis consequat, et mattis elit laoreet. Nunc maximus, dui vitae tincidunt elementum, elit tortor mattis quam, ut sodales arcu lectus eu nisi. Phasellus tincidunt at risus nec fringilla. Nunc ultricies nisl sodales, vestibulum nunc in, vulputate nisl. Vestibulum lacinia auctor hendrerit. Sed in lectus dapibus, volutpat justo vel, pellentesque ipsum. Vivamus vitae metus euismod, vestibulum odio eu, elementum quam.</p></div>
</li>
</ul>
<!-- End pattern: accordion //-->