Accordions

Overview

What's an accordion?

An accordion is a useful tool in managing the content on a web page. It lets us take a page which might otherwise be overwhelming and break it down into manageable blocks for our users, like this:

Why does it matter?

When users engage with our content, they're trying to achieve a goal; this could be to find some information or apply to university.

As UX professionals, content writers, designers, and developers, our aim is to help the user achieve that goal as quickly and easily as they can.

We want our users to find the content that they’re interested in without having to scroll through a huge amount of information that’s not relevant to their current goal.

We don't want to waste their time and energy by asking them to scroll around, potentially distracting them from achieving their goal.

The question to keep in mind when deciding whether to use an accordion is: why do we need to fold this bit of content away at this point in time? Does it help or hinder the user?

Accordions are most suitable when people only need a few key pieces of content on a single page. By hiding most of the content, we allow users to spend their time more efficiently and focus on the topics that matter to them.

Nielsen Norman has recommended several different approaches to using accordions on complex content pages.

page comparison when accordions are used

Figure 1. Size of the terms and conditions page without accordions and after redesign using accordions.

Does it have accessibility benefits?

Users with cognitive conditions such as autism and dyslexia appreciate text that is succinct and well-structured – they don't want to be confronted by a wall of text.

Users with visual impairments may have a better experience with accordions in place – accordions often have large descriptive headings, enabling the user to orient themselves more easily with the page. Accordions can also provide users with larger target areas to select.

Are there accessibility concerns?

A user should always be able to tab through page elements, enabling them to access the content with a screen reader if needed.

Labels should clearly indicate the nature of the content in the accordion, so users can decide whether to expand that section or not.

Form fields, particularly mandatory ones, should not be contained within accordions. Users – particularly those using assistive technology – may miss them, or become disoriented within the page.

Accordions in the design framework

Design

We have used left aligned chevrons in the accordion pattern:

We use a '+' elsewhere in DF to denote the ability to add something to a page, so a chevron is visually distinct from this.

Research has shown that users react more quickly to left aligned accordion actions – users are more inclined to click the label, and have a larger target area to aim for.

We have stripped the colour out of accordions in this release. This is part of a step change process to develop the implementation of colour across the UCAS' digital estate.

Future releases may reintroduce elements of colour to accordions, and requests to do so should follow the design framework process.

Rules/guidelines for using accordions

These must be applied, for the most suitable and consistent experience:

Content

Accordions should be used for small amounts of content. They are not designed for more than a couple of paragraphs or so.

Nielsen Norman has recommended text should be concise, scannable, and objective to increase usability – this is no different for content inside accordions.

If you're using an accordion to hold more than three paragraphs, consider rewriting or regrouping the content to make it more manageable for users.

Buttons should not be placed inside the body of an accordion – as mentioned in the accessibility section above, these can be lost by all users and challenging for those using assistive software.

Grouping

When you're structuring content, consider how the accordions will be grouped on the page to make the best use of the design pattern.

No more than seven accordions should be stacked together, and accordions shouldn't be used in isolation on a content page (although they are successfully used on their own across AMS).

A maximum of ten accordions can appear on any content page, but this maximum should only be used in rare cases. If you're approaching this number of accordions for your content, there should be a thorough review of the content and its layout to ensure it is of maximum benefit to the user.

There are two distinct cases (terms and conditions, and FAQ pages) where you may see accordions in much larger numbers. However, these are unique content types and this pattern should not be replicated elsewhere.

example of FAQ accordion

The expand all/collapse all buttons should be used for groups of accordions together, and should not be used if there are large amounts of text on the page between individual accordions.

Accordions should not be nested – current design patterns for nested accordions are to be used for legacy content only.

You might like to read

Patterns in action

Default accordion

Default layout and behaviour with optional expand/collapse controls.

To enable or disable the expand/collapse controls simply set the data-accordion-controls attribute to true|false respectively.

Highlight accordion with toggle

To add a highlight to the accordion control tabs simply add the accordion--highlight class to the enclosing ul.

To enable toggling behaviour, add the attribute data-accordion-mode="toggle" to the enclosing ul

Accordions with buttons

You can add small buttons to any accordion__toggle element by adding the class accordion__toggle--buttons. You should also wrap the text and button(s) inside the accordion__toggle with <span> tags to maintain the text underline on hover and maintain their alignment when one or more buttons are used.

If you would like the buttons to be on the right of the accordion__toggle simply add the class accordion__toggle--buttons-right.

Please make sure you prevent propagation of any click event on buttons used to prevent them triggering the show/hide of the accordion.

  • Repudiandae ut modi omnis

Accessibility

To ensure accordions remain accessible to screen readers and alternative input devices please pay close attention to the markup examples and refer to the documentation for explanation.

Accordions within prose

Explicabo quo sint eum veritatis eveniet accusantium et magni vel non nam. ipsam tempora consequuntur officia et ut et neque porro qui fuga. cumque cupiditate est ipsum voluptatum dolor sapiente et. doloremque qui adipisci dignissimos et fuga ut quia magnam explicabo autem neque. dolores accusantium deserunt quia quo. qui accusamus aut fugit nostrum suscipit eos nostrum deserunt Sed voluptatum delectus sint est molestias ut vero alias necessitatibus vitae incidunt. omnis repellendus rerum eos ullam et laboriosam nisi hic veritatis. ut non sint sunt quae voluptatum doloribus debitis harum alias eaque ut fugiat dolores rerum. id rerum et amet et eos libero rerum corporis sed eos illo qui quia. quod accusantium error in quae. culpa unde et voluptate non qui inventore voluptatem consequuntur.

At velit qui sed qui occaecati nam iste occaecati numquam fugit qui autem at nihil. neque quo eaque consequatur. consequuntur explicabo reiciendis aut neque qui vitae vel atque cumque. ut asperiores architecto et non voluptas eos corporis voluptatibus. qui eos debitis accusamus est nihil blanditiis omnis ducimus fugiat eum sed qui Ullam dolor officia et accusantium ipsum perspiciatis odit. aperiam sit mollitia aut dignissimos nam libero minus veniam doloribus voluptate commodi amet ut minima. est doloremque id occaecati quibusdam temporibus tempore maxime cumque. eos omnis voluptatem consequatur qui dolore quo aspernatur magni pariatur repellendus ex. aut nobis quis omnis nostrum eius.

Unde optio eos aliquid quisquam adipisci quia laudantium mollitia rerum. quas quia ut dolorum hic provident sed officiis sequi id. qui aut rerum quisquam eum odit dolores iste quibusdam labore quos incidunt illum deserunt. iure quaerat rem et et a amet aut velit molestias vitae quod rem. dolorem dolores qui aut sed sequi et tempore qui suscipit iusto praesentium Et illo perferendis debitis molestiae aut est eveniet sapiente accusamus voluptatem rerum esse nostrum rem. aut nostrum et dolores. nam magnam aliquam sapiente officia aut debitis quisquam officiis in qui occaecati recusandae quia.

Et voluptas accusamus nihil ipsam possimus consequatur. culpa fugiat et id enim voluptatem veniam architecto suscipit qui veniam aut sequi magnam doloribus. ut aliquid laboriosam aperiam quidem itaque molestias ullam dolores ea. praesentium labore officiis est repudiandae iste dolor ipsum corporis beatae id. ad ut repellendus voluptatibus dolor necessitatibus quo itaque fugiat dolor. ea consequatur quisquam sed voluptatem commodi maiores Impedit ratione qui reiciendis quos expedita at deleniti qui ut consequatur et ab ut maiores. voluptatem veritatis doloribus et cum nihil ut dolorem repellat aut recusandae suscipit provident tempore. rerum expedita temporibus cupiditate autem quasi sunt fuga consequatur dolorem quia repellendus culpa occaecati velit. ut facilis magnam quos. corrupti repellat minus itaque quam quia nisi sapiente alias aut.

At eligendi eius dicta magni asperiores ea quia aut. quod velit nesciunt beatae fuga animi occaecati est distinctio et maxime sit aliquam. similique dignissimos accusantium neque vel dolorum. nihil eaque laboriosam est similique enim placeat enim iure officiis veritatis tempore dolores et iste. repudiandae sunt tenetur et amet inventore accusamus id beatae inventore nam sint iste est corporis Consequuntur impedit enim dolorem ut quasi saepe aliquid. nihil et mollitia maxime. consequuntur ea praesentium consequatur voluptate aut dicta dolores omnis. optio omnis accusamus nam sint nostrum voluptas porro inventore optio voluptatum facilis in et. in atque aut repudiandae minus odit. necessitatibus officia magni ad incidunt omnis. ullam quisquam quis et quisquam et accusantium rerum nisi laudantium.

Back to top

Accordion with checkboxes, readonly and multiple labels

<!-- START widgets/acccordion component -->


<ul class="accordion accordion--complex accordion--clear accordion__with-checkboxes" data-accordion-controls="false">  <li class="accordion__child accordion__child--awaiting-decision">
    <div id="ideacc558b69" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false"
      aria-controls="id9c8f830903">
      <div class="accordion__label--multiple-labels">
        <h2 class="accordion__label">University of Tewkesbury</h2>
        <div class="accordion__label">Graffiti with Parkour Studies</div>
      </div>
      <div class="accordion__badges">
        <span class="badge badge--application-status">AWAITING DECISION</span>
        <span class="accordion__buttons">
          <!-- Multiaction button start -->
          <div data-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "right", "compact": true}'
            id="id1d69936cc3">
            <button class="button" type="button">Magnam officiis</button>
            <button class="button" type="button">Maxime harum</button>
            <button class="button button--secondary" type="button">Corporis</button>
          </div>
          <!-- Multiaction button end -->
        </span>
      </div>
    </div>
    <div id="id9c8f830903" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="ideacc558b69"
      aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>
          Et consequatur illo nemo maiores a quo deleniti perspiciatis. corporis quis iusto sed vel occaecati rerum labore temporibus praesentium voluptatibus voluptatibus nam in. ratione eaque deleniti adipisci velit sint et quidem voluptas. a earum eos harum perspiciatis. repudiandae saepe consequatur ut tempora

Reiciendis dolorem et non consectetur qui. quia dolor quasi tempora quibusdam quas sint nemo ipsam aspernatur nesciunt nesciunt. delectus dolorem aperiam esse est odio qui molestias porro alias nulla. cupiditate ut veritatis sed quia sit neque nulla amet dolor quibusdam quisquam. minus consequatur dolor occaecati et atque sit exercitationem. et necessitatibus quos rerum debitis deserunt repellendus tempora

Iusto vero dolor repellendus nesciunt provident. iste veniam in doloribus modi quas et. in laudantium non ea culpa tempora repellat. praesentium suscipit quae dolor enim voluptas illo tenetur tempora. quas quam earum eveniet rem cumque. sit et nihil asperiores non cupiditate similique et voluptatem. dicta accusantium et quisquam eligendi tenetur ullam aut aperiam facere voluptatum nostrum repudiandae
        </p>
      </div>
    </div>
  </li>

  <li class="accordion__child accordion__child--awaiting-decision">
    <div id="id93e1f8329e" data-accordion-trigger class="accordion__toggle accordion__toggle--with-checkbox" tabindex="0" role="button" aria-expanded="false" aria-controls="id1c232d42d7">
    <div class="accordion__label--multiple-labels">
    <h2 class="accordion__label">University of Cheltenham</h2>
    <div class="accordion__label">Graffiti with Parkour Studies</div>
  </div>
  <input type="checkbox" class="accordion__checkbox" name="checkbox_button" id="idb5e6cb16b3" value="checkbox_1" aria-label="Select row" onclick="event.stopPropagation();">
  <div class="accordion__badges">
  <span class="badge badge--application-status">AWAITING DECISION</span>
  <span class="accordion__buttons">
    <!-- Multiaction button start -->
    <div data-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "right", "compact": true}'
      id="id1d69936cc4">
      <button class="button" type="button">Magnam officiis</button>
      <button class="button" type="button">Maxime harum</button>
      <button class="button button--secondary" type="button">Corporis</button>
    </div>
    <!-- Multiaction button end -->
  </span>
</div>

    </div>
    <div id="id1c232d42d7" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="id93e1f8329e" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Id et sit ut rerum omnis neque totam repellat ab tempore ipsum. culpa qui culpa aut molestias aut fugit. saepe quis accusamus fuga voluptatem iure distinctio. voluptas et et quo et sit ipsa esse veniam. aut minus quod id porro praesentium ullam quibusdam suscipit officia in soluta culpa et. rem rerum ipsum alias veritatis et error dolorem ullam dolor

Perspiciatis cupiditate et delectus rerum ducimus omnis recusandae minima dolorum nemo consectetur voluptatum rerum. qui ut eum enim incidunt explicabo optio quasi consequatur autem omnis fugit quis. excepturi ratione sint alias quas distinctio voluptas. quod debitis id voluptates est suscipit molestiae cupiditate voluptatem porro accusamus nobis illo quo. eaque excepturi earum qui ut illum eius necessitatibus velit beatae

Nostrum expedita laboriosam rem et veritatis id itaque nostrum eveniet quisquam atque quia aperiam. occaecati at aut quia voluptas ut maiores quos aliquam iusto excepturi sunt quia excepturi qui. cum ullam molestiae illum fugiat aut aut nobis. rerum voluptas sint impedit. modi iste voluptas in</p>
      </div>
    </div>
  </li>

  <li class="accordion__child accordion__child--unsuccessful">
    <div id="id0cfa2730b1" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false"
      aria-controls="id15724e9ad6">
      <div class="accordion__label--multiple-labels">
        <h2 class="accordion__label">University of the Malverns</h2>
        <div class="accordion__label">Advanced Techniques in Wax Crayon</div>
      </div>
      <div class="accordion__badges">
        <span class="badge badge--application-status">Unsuccessful</span>
        <span class="accordion__buttons">
          <!-- Multiaction button start -->
          <div data-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "right", "compact": true}'
            id="id1d69936cc5">
            <button class="button" type="button">Magnam officiis</button>
            <button class="button" type="button">Maxime harum</button>
            <button class="button button--secondary" type="button">Corporis</button>
          </div>
          <!-- Multiaction button end -->
        </span>
      </div>
    </div>
    <div id="id15724e9ad6" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="id0cfa2730b1"
      aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>
          Veritatis et omnis et voluptatem inventore eum iste sint asperiores eveniet. enim perspiciatis possimus blanditiis vel id eum nostrum excepturi distinctio repellat voluptas. aliquid a tempora recusandae repellat et est et nemo quam ut omnis voluptatem. eum autem magnam eius inventore in et repellat reiciendis

Et et est est et rem non rerum. doloribus consequatur cum sed dolorem saepe enim sed unde harum magnam laudantium nisi quae. unde dolorum delectus sit possimus autem id qui voluptatem et unde rerum beatae recusandae necessitatibus. cupiditate rerum qui laudantium ipsa recusandae. minus odit in praesentium mollitia ullam excepturi ut sunt libero alias nihil. tenetur qui aut officiis quas labore dolor provident minima assumenda dolores placeat. non facilis aut asperiores dolor totam nemo eum aut nostrum perferendis deserunt

Voluptas rerum aut quia libero ut dicta corporis provident est at. maiores nihil magni qui cupiditate eveniet veritatis. non inventore est aliquam dolor qui et excepturi architecto maxime voluptas sequi hic. quia voluptatem dolorem cumque iste veritatis ea deserunt. dolores accusamus omnis autem rerum ut quod sit inventore
        </p>
      </div>
    </div>
  </li>

  <li class="accordion__child accordion__child--unsuccessful accordion__child--readonly">
    <div id="id00f90f75f7" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false"
      aria-controls="idec2a36506e">
      <div class="accordion__label--multiple-labels">
        <h2 class="accordion__label">University of Bristol</h2>
        <div class="accordion__label">Advanced Techniques in Wax Crayon</div>
      </div>
      <div class="accordion__badges">
        <span class="badge badge--application-status">Unsuccessful</span>
        <span class="accordion__buttons">
          <!-- Multiaction button start -->
          <div data-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "right", "compact": true}'
            id="id1d69936cc6">
            <button class="button" type="button">Magnam officiis</button>
            <button class="button" type="button">Maxime harum</button>
            <button class="button button--secondary" type="button">Corporis</button>
          </div>
          <!-- Multiaction button end -->
        </span>
      </div>
    </div>
    <div id="idec2a36506e" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="id00f90f75f7"
      aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>
          Consequatur aperiam asperiores aliquid architecto. illo quod ut architecto fuga explicabo quasi itaque. quisquam mollitia similique sed velit molestias omnis. similique et mollitia illo

Commodi eos necessitatibus consequatur. magnam distinctio facere cumque aut ut quasi numquam illum. cum optio incidunt assumenda ad quibusdam ut asperiores dolores hic est hic vel. quo ad possimus delectus reiciendis eum vel amet voluptatem quia consequuntur quod quo

Consequuntur sit autem voluptatibus amet ex dolore alias voluptatibus illum eveniet debitis qui et vitae. ipsa aliquid eaque tempore ab est distinctio consequuntur aspernatur animi natus praesentium blanditiis. nostrum repellat inventore quasi est cum minus dolorum et laborum facilis vero eveniet. et nesciunt eum dolorem. aperiam quia labore ut nemo esse nisi repellat delectus quidem et accusamus consectetur sit atque. numquam natus quo enim minima culpa aut et delectus. nulla facilis dolor aperiam in quis optio nemo sint porro porro et
        </p>
      </div>
    </div>
  </li>
</ul>