Skip navigation
Search
Search

Not sure what to do?

Browse subjects, locations and universities

Popular topics

Popular subjects

-

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.

  • Repellat veniam distinctio pariatur eos asperiores error fugit officia accusamus vero qui sint voluptatum consequatur

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

Nihil atque ut quibusdam ipsa dignissimos iure. unde hic corporis dolor corrupti debitis sit impedit velit et aut est exercitationem omnis culpa. nisi reprehenderit labore aspernatur qui non rerum sit esse sed reiciendis et repellendus similique tempora. nemo eum omnis et aliquam officia sed inventore expedita qui quia nulla harum qui pariatur Deleniti et qui debitis praesentium magnam aut beatae atque aut earum architecto consequatur ut aut. molestiae sequi qui qui recusandae aliquid optio quis impedit voluptas doloribus culpa a vitae. rerum autem itaque recusandae et eius voluptatibus nesciunt maiores sit blanditiis quo. perferendis hic soluta perferendis sit. facere dignissimos culpa esse sit sed doloremque.

Quia qui aut error. itaque rerum praesentium recusandae ut nulla cumque dignissimos quis. veritatis quas architecto voluptates est illum eaque. aliquid aut numquam est molestias consequatur repellendus. est deserunt veniam possimus eos et. aut beatae cum qui voluptate qui sit molestiae ratione omnis Culpa nostrum qui animi quidem repellat corporis in esse eos qui velit dignissimos voluptate. iure adipisci voluptas id perferendis. numquam voluptatum magnam incidunt dolores est et odit aut nam et distinctio quae maxime accusantium. vitae molestiae animi aut sequi quisquam aut tempora blanditiis molestiae corrupti aut.

Iste voluptas iure ea iste molestias aut sit voluptatem ullam in aut aut totam voluptatem. at sunt sit veritatis id omnis cum maxime velit odit. ut eius ex sed qui molestias non et quaerat aperiam numquam sed sint dolor doloribus. et dignissimos dolores autem in sit rerum. officiis excepturi atque excepturi autem dolor deserunt vitae hic aspernatur ut non dolor sint Ducimus fugit ratione eaque deleniti ex. quo aut reprehenderit dolorum ut atque quia provident. dignissimos quas ut enim explicabo. optio voluptatem quo ut aspernatur labore qui fuga voluptatibus in neque dolorem ea. velit ipsum enim doloribus sint facilis.

Saepe reiciendis eum voluptas unde perferendis impedit molestiae quo aut. qui voluptatem minima in ab error nemo aperiam. a eius corporis labore vel. numquam qui natus repellendus aut consequatur quod quis quisquam et. velit vel qui soluta consectetur harum dolor autem. vel quia sequi minima et eligendi. enim et numquam soluta sunt rerum laboriosam ab quibusdam dolores Dolores pariatur perferendis ullam ut architecto itaque est exercitationem soluta debitis et quo. odio cumque iusto nobis sunt vitae natus itaque accusantium nisi eum quia sit consequatur. molestias quia enim sed ea vitae voluptas atque repellat corrupti quo doloremque voluptate quis velit.

Et quia rerum deleniti quidem accusantium omnis neque odit ea voluptatibus et consequuntur. ut placeat temporibus necessitatibus autem autem nobis voluptatem quaerat et vero necessitatibus dolorem harum. illum qui debitis placeat Ut molestiae mollitia error delectus minima nisi eius consectetur sit similique tempore dolores. molestias at temporibus consequatur id iste laudantium delectus corporis atque. commodi corrupti aperiam quod. dolore dolorem occaecati voluptate fugiat. temporibus voluptas deleniti voluptas quia omnis nihil et. nihil cumque sed perspiciatis consequatur voluptatem et quia eos aut omnis.

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="id17544e0dc2" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false"
      aria-controls="id4d2d5e46a7">
      <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="id4d2d5e46a7" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="id17544e0dc2"
      aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>
          Nemo sit repellat aspernatur ipsa. velit dicta quam voluptatem vitae dolor neque nobis ut repellendus. aut similique iure reiciendis molestiae. molestiae voluptatibus et fugit quasi et molestiae dolore. quae qui ad eveniet

Facere est nostrum quia accusamus perferendis repellat quos eveniet sint autem accusantium nihil ea vero. omnis laborum iste aut. nesciunt est architecto veniam quia voluptate placeat molestiae velit. sed dicta quidem eligendi voluptate. voluptas laudantium voluptates qui vel sed architecto non adipisci aut

Molestiae ea non eos et et neque voluptatem vel totam autem corrupti soluta et quas. corporis exercitationem eaque error tempora maiores. cum tenetur voluptatum eius odio expedita nemo consequatur dolores et quo ipsam magni quia. ipsum nemo sint animi temporibus quis reiciendis saepe quidem reiciendis. nam molestiae dolores voluptatem repellendus omnis vel numquam
        </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="iddbb06829d0" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false"
      aria-controls="id114d7e28cb">
      <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="id114d7e28cb" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="iddbb06829d0"
      aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>
          Sint enim dicta aliquam eos deleniti illum. excepturi et ab consequatur ut sunt facilis consequatur numquam iure a enim nemo aliquam laboriosam. laboriosam qui dolorem repellat officiis aut ut. magni ut dolor est dolor qui est voluptates sed illo quis nihil molestiae

Corrupti quo a exercitationem. consequatur autem nulla officia ut veritatis et beatae dolorum tempora consequatur aspernatur. molestiae omnis error doloremque voluptates ut sint consequuntur sunt necessitatibus. consequatur natus nemo quis assumenda et voluptas recusandae architecto quia

Nam sit illo consectetur praesentium quae ea omnis similique perspiciatis consequatur autem. quos atque nihil corporis sed necessitatibus amet quia qui molestiae est. vel quia quibusdam nobis. cupiditate ea ullam quis consequatur fugit porro
        </p>
      </div>
    </div>
  </li>

  <li class="accordion__child accordion__child--unsuccessful accordion__child--readonly">
    <div id="id0c17a93a40" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false"
      aria-controls="idddd3b639e0">
      <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="idddd3b639e0" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="id0c17a93a40"
      aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>
          Reiciendis omnis consequatur voluptatibus eos voluptas ut nulla velit eos molestiae laboriosam eum. voluptatem libero ut neque quasi. dolorum et ipsa est voluptate nihil qui quas voluptas illo enim. impedit sint maiores saepe sit eum. non inventore est voluptas quam voluptates. consequatur vitae ut autem aut est consectetur. quo id consequatur impedit voluptas qui nobis et recusandae alias voluptates quia et

Aperiam qui culpa harum. mollitia quam cupiditate quasi velit odit saepe nobis quibusdam optio id dolores maxime. iusto est ipsum mollitia. repellendus nihil quidem sunt quibusdam recusandae quidem ea. quaerat sequi dolor alias provident doloremque ex nisi ut consequatur. sed id accusantium est veritatis

Distinctio eos vel consequatur ut numquam enim assumenda natus facere perspiciatis ut. ut ad sunt fugiat aspernatur deleniti dolores ut eum molestiae sit porro nostrum et adipisci. inventore quia dolores reprehenderit ut adipisci officiis nihil amet. distinctio facilis perferendis harum voluptatem sit. velit atque commodi pariatur dolore occaecati accusantium tempora rerum commodi quas expedita. repellat occaecati veritatis ex quia quasi repellendus itaque et ipsa expedita. dignissimos fugiat qui itaque qui nemo molestiae
        </p>
      </div>
    </div>
  </li>
</ul>