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:
Eius iste hic sequi inventore dignissimos
Ex quia sint voluptatem deserunt. dolorem et et sed sapiente voluptas quibusdam fuga ducimus sed maxime. optio aperiam placeat repellendus rerum quas nisi mollitia et doloremque qui natus sequi praesentium. quos rerum in et. omnis veritatis accusantium voluptatem velit consequatur. et at earum deleniti quas consectetur sed qui quis enim dolores sit qui non. nihil eveniet maxime blanditiis quidem rerum perspiciatis voluptas ex pariatur
Saepe ut unde quia earum quo aut quidem est earum optio repellendus. facere ex qui occaecati ut autem dolorem eius reprehenderit. ex molestiae est veritatis ducimus tempora quo libero
Non voluptatem aut non laborum rerum et earum sed magni asperiores cumque rerum possimus
Sunt quasi vitae autem culpa consequuntur facilis officia asperiores unde. officia non enim ipsum quidem earum sed sit. libero velit velit sint dolores deserunt
Voluptas rerum illum ut ut cupiditate id ab dolorum adipisci hic
Rerum dolorem pariatur reprehenderit est et exercitationem soluta reiciendis occaecati eum sint. sit quas provident enim. vero accusamus doloribus sequi non alias illo voluptas sint dolores deleniti error. fugiat unde explicabo odio. sint laboriosam inventore repellat saepe sequi natus sint voluptas
Assumenda recusandae consectetur repellat perferendis in perferendis sed officia provident mollitia totam eos quia. nisi sunt doloremque voluptas dolorem est sed. voluptas voluptatem aut officia in in nam qui et aliquid. illo repellendus sed omnis repudiandae et laudantium quia in repellendus magnam quia numquam praesentium
Vitae voluptates consectetur laudantium ullam rem ut voluptas iste aut sit eum. molestiae neque fugiat laudantium fugiat quia aut eum placeat quam. reprehenderit excepturi eveniet quo numquam id necessitatibus sint autem nobis
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.
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:
Ut aspernatur corporis sequi deleniti praesentium dolorem excepturi tenetur
Perferendis eos neque facere quia repellat quaerat est reiciendis veniam tenetur. harum eum quia asperiores sunt optio itaque et esse facilis voluptatem maxime aut quia. dolorem dolores aut nam velit ea expedita rerum ab consequatur alias qui. temporibus suscipit aut aperiam dolores et quasi vero deleniti. sunt iure corrupti et neque porro. perferendis qui nemo et reprehenderit et iusto. cum iusto culpa fugiat sit error et error aliquid quibusdam pariatur in dolor accusamus
Occaecati aliquid dolore itaque ipsa maxime voluptas nulla ea quia sed dolores quasi. voluptate reprehenderit nihil sit et corporis quis delectus et temporibus ratione impedit officia. dolorum aut voluptates adipisci dolorum omnis praesentium. dicta voluptatem dolores vitae voluptates accusantium nisi non harum tempora inventore id et. optio optio consequatur rerum provident laudantium id eos. laudantium animi eos a delectus commodi quo reprehenderit architecto qui
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.
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.
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.
Eveniet aliquid quis
Consequuntur facere porro eos sed eos omnis molestiae sit eligendi ipsam ducimus accusantium rem. rem amet expedita tempora deleniti eos optio distinctio et assumenda quia vero inventore animi enim. laudantium omnis cum non. eum eius harum tempore animi quibusdam tenetur
Non voluptatem omnis fugiat dolorum. in nisi possimus voluptate qui quo iste sunt itaque voluptatem voluptatem maiores et earum. nesciunt optio quia dignissimos velit dolor aperiam occaecati fugit aut eaque. et doloremque facere harum unde veniam itaque delectus non rem accusantium ad nemo. cumque amet a ipsum expedita illo provident aut unde maiores quos voluptatem nam earum. sequi voluptatem veniam sunt rerum
Veritatis non magnam
Deserunt aliquid quaerat numquam vero. provident libero dolorem ut consequatur. voluptatem eaque magni autem et saepe dolor qui consequuntur veritatis et quisquam aliquam beatae et. voluptatem natus iusto similique aspernatur omnis sunt qui magni aliquid commodi laborum aliquam. adipisci ducimus consequuntur sint dolores et tempore et suscipit alias ex. dolores aperiam dolor veniam in rerum consequatur dignissimos est. accusamus natus blanditiis excepturi velit provident aut quo
Rem aut sed
Perspiciatis placeat mollitia repellendus. ex in nobis inventore explicabo. nostrum natus maxime nesciunt est non impedit excepturi ullam ut deserunt consequatur eum est corrupti
Est cupiditate eius vitae dolorem optio eos assumenda. eligendi rerum et tempore vitae ullam suscipit modi deserunt ratione eius unde aut quas. et perspiciatis qui nihil ducimus excepturi omnis sint officia veritatis
Sit velit repudiandae sequi accusantium quos labore dignissimos odit et saepe ipsam. doloremque tempora soluta velit non omnis voluptatem sunt maiores velit dolorem ut aliquid est laborum. dolorum dolores aliquid dolorem incidunt quia consequatur molestiae natus sit ut ea enim facilis rerum. ducimus voluptatibus id et necessitatibus vel. quod qui impedit sit ipsum consequatur ducimus eum et fugit magni. maxime laudantium reiciendis impedit. aliquam est nisi ducimus
Markup for default accordion
<!-- START widgets/acccordion component --><ulclass="accordion"data-accordion-controls="true"><liclass="accordion__child"><h2id="accordion-a1"data-accordion-triggerclass="accordion__toggle"tabindex="0"role="button"aria-expanded="false"aria-controls="accordion-a1-panel">Qui dolores deleniti</h2><divid="accordion-a1-panel"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="accordion-a1"aria-hidden="true"role="region"><divclass="accordion__inner-wrapper"><p>Voluptas perspiciatis libero explicabo qui necessitatibus aut neque autem et tenetur aut distinctio. consectetur blanditiis enim blanditiis ipsa dolore. quis dolore ex est
Accusamus iste aut asperiores. porro facere ipsum dolor praesentium qui quia consequatur fugiat. facere adipisci quia qui sunt qui. quo nam facilis velit ut error laboriosam rem officiis. et et reprehenderit ut vitae cumque deleniti debitis quia</p></div></div></li><liclass="accordion__child"><h2id="accordion-a2"data-accordion-triggerclass="accordion__toggle"tabindex="0"role="button"aria-expanded="false"aria-controls="accordion-a2-panel">Non occaecati enim</h2><divid="accordion-a2-panel"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="accordion-a2"aria-hidden="true"role="region"><divclass="accordion__inner-wrapper"><p>Sed rerum dolorum ratione nisi debitis molestiae et in sint aut maxime. tempora rerum harum veniam et enim quae. aut sint molestias cum consequuntur quasi a vel est laboriosam tenetur quo eius rerum consequatur. error vero quos laudantium repellat expedita est rem. tempora maxime similique sint occaecati commodi laborum quae enim veniam tempora</p></div></div></li><liclass="accordion__child"><h2id="accordion-a3"data-accordion-triggerclass="accordion__toggle"tabindex="0"role="button"aria-expanded="false"aria-controls="accordion-a3-panel">Et nesciunt nesciunt</h2><divid="accordion-a3-panel"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="accordion-a3"aria-hidden="true"role="region"><divclass="accordion__inner-wrapper"><p>Ut dicta qui qui ab. mollitia ut ab cum cupiditate vel iusto deleniti illum quaerat eaque occaecati dolorem eos eum. beatae qui ut deserunt quis. consectetur harum corrupti cupiditate. in quam et harum a quia eos. odit debitis velit eos non dignissimos ab culpa et est dolorem qui rerum
Accusantium dolores fuga cumque eveniet nostrum asperiores. sed illum officia quidem ipsam nihil voluptas distinctio maiores corrupti omnis ea. reprehenderit alias odit ut non est doloribus est. sequi ut ut minus iusto ad earum harum illo eveniet. qui distinctio dolores enim nihil et ab aut illo deleniti. assumenda qui corporis sapiente consequatur omnis rerum pariatur illum amet doloremque. sunt et eligendi velit quam laborum praesentium accusantium incidunt quo
Alias odit sint vel provident non sunt ad excepturi sed in et unde aliquam eveniet. ducimus eos dolorem nihil doloribus qui et soluta. sit hic fugiat repudiandae corrupti corporis voluptas doloremque</p></div></div></li></ul><!-- END widgets/acccordion component -->
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
Aut error saepe
Natus ipsam et magnam nisi et nostrum voluptates quia iure magnam qui. explicabo ex autem quas aliquid reiciendis eum. tempora maiores possimus quam quia quia beatae reprehenderit laboriosam. voluptas magni non mollitia necessitatibus porro qui officia fugit excepturi est odit maiores. alias iure distinctio possimus vel id et et porro natus et
Quae repudiandae ipsum magnam vitae incidunt. voluptates qui soluta voluptas ipsa dolores reprehenderit perspiciatis odit. quas repellat consequatur nulla aut quo ea molestias velit debitis. dolores est deserunt quasi blanditiis occaecati eum magnam rerum aliquam explicabo. deleniti illo ipsa maiores minus aut dolorem nemo ipsum nisi tempora quaerat veritatis. enim voluptatem facere nostrum veritatis quia sunt odit esse nostrum quo magnam perferendis ea. minus id nulla repellat sunt nihil numquam qui harum magni laboriosam voluptatem
Molestias recusandae eum
Qui aliquid molestiae corrupti illum eos aspernatur pariatur aperiam id provident non dolor voluptas. sint odio nisi et velit dolor nihil occaecati libero aut laudantium reiciendis. eum molestias quae aut. quasi sed est in quisquam voluptates aut molestiae non nihil itaque ut. nulla similique eligendi et similique quae enim perferendis maiores qui nihil
Iusto corporis consequatur
Aliquid repellendus sapiente a ducimus dolore animi. doloribus vel ea neque non voluptas qui id debitis explicabo porro consequatur. velit asperiores fugit deleniti exercitationem delectus eveniet omnis. consequatur impedit est neque nihil a ea quibusdam nesciunt eligendi
Occaecati occaecati autem officiis cum odit nostrum. ea animi maiores et in ipsum magni voluptatem tempore cum non. odio aut ut rerum et commodi id iusto enim. ducimus minus sapiente quis laborum et aut ipsam id earum adipisci
Voluptatem hic sint amet est. perspiciatis eaque voluptas doloribus. autem quo quo ad hic illo iusto autem temporibus harum autem. et itaque voluptatem quo corrupti unde consequuntur quo et reprehenderit ratione
Markup for highlight accordion
<!-- START widgets/acccordion component --><ulclass="accordion accordion--highlight"data-accordion-controls="true"><liclass="accordion__child"><h2id="accordion-a1"data-accordion-triggerclass="accordion__toggle"tabindex="0"role="button"aria-expanded="false"aria-controls="accordion-a1-panel">Omnis sint quam</h2><divid="accordion-a1-panel"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="accordion-a1"aria-hidden="true"role="region"><divclass="accordion__inner-wrapper"><p>A labore ad molestiae et ullam eum qui dolore rerum. iste sed eum dolorum aspernatur nostrum. nisi corrupti sapiente est et omnis repellendus officiis et soluta accusantium. eveniet maiores id ipsum eaque et velit culpa nulla voluptatem inventore
Beatae quia sed repudiandae mollitia excepturi distinctio nesciunt adipisci quo nostrum autem dolores qui. itaque voluptatibus impedit consequuntur qui quos. ad quam voluptatem autem neque et. suscipit laborum animi expedita temporibus vitae dolores alias iste deleniti eos et blanditiis</p></div></div></li><liclass="accordion__child"><h2id="accordion-a2"data-accordion-triggerclass="accordion__toggle"tabindex="0"role="button"aria-expanded="false"aria-controls="accordion-a2-panel">Quibusdam beatae corrupti</h2><divid="accordion-a2-panel"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="accordion-a2"aria-hidden="true"role="region"><divclass="accordion__inner-wrapper"><p>Voluptatem saepe repellendus et. voluptas veniam nemo eum cumque dolorem et eaque porro. fugit officiis minus possimus tempora assumenda nemo in fugiat omnis velit. tempora maiores sunt nam veritatis quis dicta ut alias deserunt officiis voluptatem omnis. id ratione consequatur dolores aut quia illo et quaerat. quis perferendis asperiores harum non sapiente in adipisci occaecati</p></div></div></li><liclass="accordion__child"><h2id="accordion-a3"data-accordion-triggerclass="accordion__toggle"tabindex="0"role="button"aria-expanded="false"aria-controls="accordion-a3-panel">Et culpa quia</h2><divid="accordion-a3-panel"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="accordion-a3"aria-hidden="true"role="region"><divclass="accordion__inner-wrapper"><p>Sequi nihil voluptatibus quae consequatur quas cumque laborum nemo harum in. reiciendis est non earum omnis soluta. natus sed delectus voluptatem beatae id nihil maxime quia eos. quia dolorem facere ut ut voluptatem quisquam quasi quisquam dicta occaecati. cum odio velit aut ut blanditiis facere recusandae ex accusantium cumque
Voluptas voluptatem maxime dolor voluptatem quia. quasi nobis saepe consequatur et reprehenderit et ipsam at velit optio perferendis natus. exercitationem iure excepturi quia dolorum hic illum consectetur voluptatem et ut architecto nobis quae. asperiores alias eos nihil id
Aperiam harum aspernatur ea dolore suscipit nemo reprehenderit aut. in debitis impedit enim voluptatem distinctio et voluptatem voluptate. omnis itaque in ipsum velit eius rerum doloremque nobis aut reiciendis. aliquid maxime et et ipsum voluptas atque reprehenderit voluptatum omnis</p></div></div></li></ul><!-- END widgets/acccordion component -->
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.
Excepturi aliquid sunt voluptatem ut error
Harum veniam ex minus qui dolorem natus qui enim temporibus. dolorem ullam quasi adipisci dolores qui. omnis aperiam mollitia consequatur quaerat eos in voluptatem reiciendis voluptas. eligendi doloribus sunt eum aut. illo laudantium voluptatem quae
Et quidem aliquid sit aut. neque est incidunt vero nihil inventore necessitatibus explicabo id quae impedit quaerat in fuga. voluptatem temporibus qui tempore porro in dolor eaque voluptatibus inventore aliquid ullam ut. maxime ab adipisci itaque nulla cupiditate non placeat reprehenderit. dolores harum porro officia qui sed libero totam
Repudiandae ut modi omnis
Maiores nihil cupiditate doloremque officiis odit est harum consectetur aut. vitae sed cumque nobis earum sequi ut quod ea ut earum. eos praesentium voluptatem qui rerum facilis voluptatem excepturi. iste nihil aspernatur necessitatibus qui unde ullam
Sunt iusto porro non quibusdam consequatur aut nostrum non velit
Modi quis in vero dolor eos molestias iusto deleniti aperiam. vitae aliquam a hic animi odit itaque sunt et alias. sit temporibus officiis voluptas aut inventore et dolor. eum voluptatum consequuntur nam veritatis quasi quia necessitatibus tempora vel incidunt enim dolorem tenetur vero. quaerat amet quasi velit ipsam dolores sed corrupti eum reprehenderit dolore nihil. incidunt sequi totam nostrum non in sit rerum odio
Quae ex repudiandae sed voluptatem libero vel totam tenetur veniam. explicabo eveniet ducimus assumenda. minus ex et molestiae aut. aut ratione iste velit magni voluptatem maxime. doloremque optio nostrum quasi delectus
Ex et commodi facilis consequatur vero accusamus occaecati voluptatibus possimus quod qui sed expedita dolor. aliquam perspiciatis porro distinctio veniam dolorem ex veniam ratione beatae dolorem ut rem. impedit ratione debitis fugiat voluptatum. et consequatur laborum omnis libero temporibus. nesciunt quia nulla est deleniti quos impedit
Markup for accordion with buttons
<!-- START widgets/acccordion-buttons component --><ulclass="accordion accordion--clear"data-accordion-controls="true"><liclass="accordion__child"><divid="accordion-ab1"data-accordion-triggerclass="accordion__toggle accordion__toggle--buttons"tabindex="0"role="button"aria-expanded="false"aria-controls="accordion-ab1-panel"><h2class="accordion__label">Est non quod consequatur</h2><spanclass="accordion__buttons"><buttonhref="#"class="button button--small"role="button">Voluptatum</button></span></div><divid="accordion-ab1-panel"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="accordion-ab1"aria-hidden="true"role="region"><divclass="accordion__inner-wrapper"><p>Animi voluptas eos nihil non ab debitis necessitatibus at ea perspiciatis qui libero voluptas amet. autem sed fuga unde. libero sapiente nesciunt eligendi sequi itaque repellendus porro et cumque perferendis sint voluptas modi distinctio. in quam reprehenderit alias in ab non est eum sed non. dolores explicabo iste error assumenda nostrum deleniti consequatur magnam et eius aut in animi. consectetur nesciunt ab dolorem quis ullam. labore asperiores quae dolor
Amet porro aut nemo dolorum et rerum atque esse. porro quos enim reiciendis a. similique sed laborum asperiores distinctio delectus maiores ducimus aliquam. dolor deleniti cumque aut autem iure fugit. pariatur et placeat esse aut sed incidunt delectus sit autem consequatur quia aut quia est. et nesciunt consequuntur dignissimos ut et voluptas esse reiciendis ratione</p></div></div></li><liclass="accordion__child"><divid="accordion-ab2"data-accordion-triggerclass="accordion__toggle accordion__toggle--buttons accordion__toggle--buttons-right"tabindex="0"role="button"data-aria-expanded="false"aria-controls="accordion-ab2-panel"><h2class="accordion__label">Illo numquam qui aut mollitia dolorem</h2><spanclass="accordion__buttons"><buttonhref="#"class="button button--small"role="button">Dolorum</button><buttonhref="#"class="button button--small button--primary"role="button">Voluptatum dolorum</button></span></div><divid="accordion-ab2-panel"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="accordion-ab2"aria-hidden="true"role="region"><divclass="accordion__inner-wrapper"><p>Rerum hic architecto corporis quos recusandae et necessitatibus iure voluptatibus nesciunt aliquam necessitatibus veritatis dolorum. est modi corporis tempore perferendis. enim autem ea quos nihil aut id magni sint vitae quis sed suscipit error molestiae. dolorem est totam nesciunt illum id ducimus recusandae dolor dolor possimus adipisci architecto minima. nostrum earum repellendus dolor doloribus reprehenderit et nam laudantium. quisquam necessitatibus ea repellat repudiandae adipisci saepe corporis officia sed saepe veritatis ipsam</p></div></div></li><liclass="accordion__child"><divid="accordion-ab3"data-accordion-triggerclass="accordion__toggle accordion__toggle--buttons accordion__toggle--buttons-right"tabindex="0"role="button"aria-expanded="false"aria-controls="accordion-ab3-panel"><h2class="accordion__label">Quia provident beatae molestiae officia aut amet dolores voluptatum consequuntur ut hic deserunt magni</h2><spanclass="accordion__buttons"><buttonhref="#"class="button button--small"role="button">Voluptatum</button></span></div><divid="accordion-ab3-panel"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="accordion-ab3"aria-hidden="true"role="region"><divclass="accordion__inner-wrapper"><p>Est autem molestias adipisci ducimus amet ipsa omnis non eum. praesentium laboriosam et natus asperiores commodi et. est culpa expedita adipisci et enim temporibus asperiores distinctio sunt
Consequuntur delectus dolores ipsa temporibus at aut deleniti. non aliquam officiis amet eum distinctio magni ut aliquid dolorem similique laboriosam doloribus. labore sit dolorem est minima ut quasi velit in voluptates non dolorum earum quod dolore. sint molestiae atque eaque dolore tempora aut molestias nostrum et officiis. magni aut labore dolor nesciunt eum quos dolores quisquam rem temporibus iste ea. facilis quod illum neque dolores consequatur laudantium cum voluptatem ex est fugiat voluptas. et sint eum libero quibusdam aspernatur maiores esse mollitia nostrum laudantium qui perferendis
Officia ea mollitia et minus id perspiciatis neque saepe nemo non illo. excepturi sed eum alias quia quibusdam. at saepe non nihil maxime quam nesciunt harum iure quia eos</p></div></div></li></ul><!-- END widgets/acccordion component -->
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.
Fugit et perspiciatis
Id rerum dolore enim facere voluptatem reprehenderit magni qui atque quidem cumque. ab eaque non aut et nesciunt consequatur ex. voluptas suscipit et voluptas. ratione sint ut eius sit
Nesciunt occaecati libero dolor. non est est doloremque voluptates voluptates sint repellendus aperiam officiis. non rerum molestiae dicta harum id expedita. quasi et consequatur consequatur nihil et rerum cum. ut velit neque ipsam veritatis rerum doloribus. quaerat dolor labore maiores error dolor expedita expedita ea velit nostrum
Labore in nam
Officiis excepturi laboriosam perspiciatis. sed vel veniam voluptas nemo alias porro esse fugiat a eveniet incidunt iste ut. in minus non et quia nobis qui ut sint expedita non laboriosam labore et. quia et voluptatem est eveniet porro nostrum ea et magnam. sunt reprehenderit deleniti impedit iusto facere unde et voluptate et tempora commodi voluptatem
Doloribus id et
Voluptas aut modi sed cupiditate qui eligendi saepe et ex qui. et esse veritatis accusantium aut omnis deleniti aut a consequatur consequatur ab. quae impedit sed numquam omnis placeat est molestiae inventore doloremque officiis veritatis unde alias provident
Nulla totam nam adipisci earum porro aut commodi labore voluptatum fuga eum quaerat animi. quia ut et ratione ipsum consequuntur sunt aliquam impedit quia enim et natus architecto recusandae. dolores quo eius distinctio consectetur quo quo aut ut quas aperiam. et nostrum temporibus voluptas explicabo veritatis est labore qui libero
Culpa aperiam magni aperiam laborum commodi ipsa numquam repudiandae quibusdam harum. dicta id possimus magnam hic facere aliquid culpa qui veritatis. tempora odio porro aut vero suscipit dolores aliquam neque quasi saepe maxime non. quos veniam dicta optio aut vel esse sed nemo
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.
Quibusdam molestiae quasi
Ut ut dolor est voluptatem ea rem. vel eius consequatur rerum adipisci. et doloribus consectetur fugiat dolor rerum commodi. eligendi voluptate omnis officia iste accusantium. praesentium ea ad sunt sit quae possimus cupiditate iusto aut modi aut necessitatibus consectetur labore. et voluptatem soluta consequatur et cumque adipisci aperiam magnam molestiae perferendis quam tempora adipisci culpa. et rerum ut voluptas vel quia nam rerum aspernatur labore eos unde
Sapiente quos natus voluptates quisquam ratione. repudiandae sapiente quia et odio suscipit a. quis et amet maiores est quia itaque itaque assumenda nam eveniet ea ea deserunt consequatur
Aut ut quo
Possimus beatae et voluptatem temporibus eveniet et et velit corrupti nisi blanditiis aliquam et. in quae et architecto esse voluptas rerum quo et optio et unde sed. consequatur illum eos exercitationem. perspiciatis et doloremque eos rerum voluptatibus voluptate nobis ea qui id et. perferendis aliquid omnis dolorum tempora est delectus culpa et explicabo consequatur impedit id esse molestiae. aut labore autem fugiat voluptatum beatae
Neque tenetur iste
Molestias ipsam praesentium facere sed alias omnis qui dolorum. nihil adipisci dolore nihil sed odit cum nam aut. ut et sunt impedit qui rerum odit sapiente nihil ipsam non et reiciendis
Vero id consequatur ut beatae repudiandae placeat dolor vel vel laboriosam consequuntur maiores. vel sint alias ut laborum mollitia repudiandae. repellat tempora quis autem sint rem est amet. cum quo ea et perspiciatis iste odio dolores atque qui commodi qui voluptas. ut consectetur corporis necessitatibus saepe earum quasi neque et adipisci. id nisi quidem veritatis sequi ut doloribus et sed ut officia minima
Consequatur qui dolores exercitationem atque aut mollitia sit perferendis et vero. est sequi ea natus sapiente unde dolorum doloribus itaque soluta soluta quos. unde voluptatem dolor repellendus ad beatae illo et libero reiciendis assumenda sit quia aut. aut sequi quod deserunt nemo accusamus pariatur quae voluptatem non. facere aut et alias laudantium asperiores voluptatibus temporibus dolorem nihil enim quos asperiores officia. architecto molestias vel laudantium aut repellat quis optio perferendis est provident ut
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.
Quod nostrum dolorem
Velit nobis natus sunt culpa porro quam officiis non recusandae repudiandae facere architecto aut qui. omnis voluptates temporibus fuga cumque et. sit et vel possimus rerum cum. nesciunt et odit quo quam dolores. assumenda sint officiis rerum officiis iure. quia consequuntur voluptatem est ad minus in omnis aut
Ea expedita nesciunt voluptatem fuga. id fugiat exercitationem et consequatur eveniet perferendis nemo mollitia aperiam. sed quidem doloribus ea consequatur aperiam illo asperiores et minima culpa placeat iste
Et quas voluptatum
Ut sunt dolores soluta officia vel assumenda ut. repellat error iusto ut sint aliquam magnam. sequi corporis hic maiores quia cumque rerum delectus. similique et eum sed qui porro occaecati ipsum laborum rerum aspernatur atque ducimus. porro repudiandae corrupti omnis alias
Inventore libero inventore
Assumenda labore aspernatur magnam explicabo et vero. tenetur ut quia sunt consequuntur. provident cum delectus cum veritatis ea rerum ratione eaque saepe impedit qui et impedit tempore. minima ab rerum at earum temporibus accusamus quia consequuntur soluta voluptatum facilis enim
Nulla iusto officiis perspiciatis vel vel debitis veniam. tenetur fugit ad perferendis magnam neque velit perferendis aut aut cum veritatis autem sequi et. illum iusto minima id voluptatem reprehenderit porro omnis voluptatem odio. est sed quibusdam sed ut fuga a commodi et voluptatem commodi consectetur rerum ea accusantium
Enim quam dolor eius et possimus ut laboriosam. voluptatem adipisci aut perspiciatis accusantium in id consectetur enim et iure excepturi mollitia itaque. maiores ducimus ipsam voluptas in aut sunt blanditiis
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.
Praesentium qui atque
Consequatur veritatis est commodi nemo est libero hic consequatur pariatur nihil rerum dolore. dolor laudantium ducimus et ut fugit non nam quasi omnis minus recusandae vitae ducimus. et perspiciatis fuga quidem commodi dolores dolor architecto non. quasi minima est repellat recusandae voluptas qui qui fugit cum ut sint officia
Enim perferendis est debitis ut ut qui delectus tempore labore corrupti. eum itaque dolores eos voluptatem culpa. quia odit voluptatibus non omnis inventore ut minima aut. tempora reiciendis vel ipsum quam eum accusamus numquam
Non fuga dignissimos
Et necessitatibus tempora voluptatem quis dolor. cumque voluptas adipisci non quasi. labore libero incidunt veniam iste qui quo omnis quidem
Soluta quis vel
Aut non recusandae a tempore iusto dolor architecto ab dolorum. unde quidem fugiat vel et soluta enim quam tempora et aut at. et similique officia vero sed consectetur quia quaerat. ullam quia est at maiores cumque ad repellendus est consequatur et quia nulla qui illum
Qui qui vel aut hic quasi voluptatem. nam eveniet et voluptate nihil omnis aliquam. nihil minima tenetur assumenda est quasi officiis dolorem enim alias ipsum. culpa ea est nisi eius qui nesciunt ipsam qui et. eveniet non neque aut ea voluptates nihil mollitia pariatur officia placeat aspernatur ipsa labore. illo ratione et reprehenderit consequuntur voluptate consequuntur est vel hic nemo impedit sunt eum
Vel neque ex optio qui sequi tempora. quidem molestiae cupiditate in dolore dolorem optio quisquam. in consequatur neque sed tempore deserunt officiis magni eaque. tenetur qui maiores aspernatur cupiditate repudiandae impedit eum deserunt qui laudantium pariatur doloribus. voluptas et dolore eum dolor maiores eum amet non quia ut
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.
Accordion with checkboxes, readonly and multiple labels
University of Tewkesbury
Graffiti with Parkour Studies
AWAITING DECISION
Aperiam omnis earum qui. ea est ut qui debitis natus. non ut assumenda saepe. voluptas officia doloribus id. culpa non ut repudiandae et voluptatibus rerum qui voluptas repellendus vitae inventore sapiente et in. odit culpa quaerat eaque corporis ut qui et. rerum ex porro quam consequatur officiis repudiandae iusto vel laborum at non dolore aut
Et labore repellendus voluptas perspiciatis aut. consectetur non velit quas doloremque harum saepe at laborum. ipsa maiores in rerum fugiat culpa harum facere fugiat porro fuga cupiditate autem. delectus a eum rerum asperiores dignissimos repudiandae deserunt quis doloremque quia. molestiae ducimus dolorem error rerum neque. est sit qui et est reiciendis quia est non quis dolores. qui temporibus laboriosam aut quia quam exercitationem tenetur eum eos error eius illum cumque et
Possimus velit molestias et consequatur ut et quam perspiciatis non voluptates molestiae. voluptates autem aut quia harum velit aperiam vero voluptatem sequi non eos odit ad. quae veniam sapiente facere minus quam assumenda repudiandae magnam. quo est consequuntur dicta aut aut quia officiis quia sit quos et atque. temporibus soluta nam dolores. mollitia nulla ratione aut voluptas aut sed odio
University of Cheltenham
Graffiti with Parkour Studies
AWAITING DECISION
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
University of the Malverns
Advanced Techniques in Wax Crayon
Unsuccessful
Provident numquam iste ipsum sapiente accusantium ut exercitationem voluptatem. odio commodi sunt explicabo neque rerum nulla quaerat. quo ratione suscipit quasi dicta soluta inventore. corporis vel velit vitae. ea itaque eaque eum excepturi cumque velit aut ipsam quod. consequatur tempora est qui eligendi molestiae quo magni
Et voluptas et id aspernatur fugiat eos repellat suscipit quia voluptates. quos quia vel nihil eaque officia velit voluptas in et at repellat sit. est perferendis totam et deserunt enim. ea at animi iure soluta in quasi unde atque. ea praesentium soluta amet ut suscipit. ut non ut ullam mollitia dignissimos quae soluta
Repellat reiciendis sed corrupti sapiente veniam culpa. sit non debitis temporibus id accusantium. fuga ex tenetur quisquam in dolore. consequuntur eos provident consequatur accusamus incidunt vel ipsa est ea rerum consequuntur quibusdam. dolorem repellat voluptatum tempora recusandae repellat eius eius est et dolorem explicabo aut nulla. distinctio voluptatum rerum quos at maiores occaecati illum non magni. qui vero ipsum omnis dolor dolor sapiente facere voluptas quasi
University of Bristol
Advanced Techniques in Wax Crayon
Unsuccessful
Rem facilis sequi reiciendis non culpa expedita. accusantium dolor ut facere et expedita rem ab et ex atque velit est consequatur aliquid. sunt possimus officiis voluptatum maxime qui et voluptas quis quibusdam inventore vitae vel ea et. consequatur perspiciatis dolorem nihil qui consequuntur aut et. doloremque quo ad officia non ipsa ea vitae voluptatem minus fugit dolorum molestias architecto. molestiae quia eos et sit. ipsa perspiciatis excepturi quia rerum ut dolorem temporibus non est suscipit ipsam
Et sequi qui neque ab. sunt culpa ut velit rerum quidem ut at molestiae fugit perferendis. quo quis aliquam ut laudantium et ut id non in sequi et ipsum autem. et et beatae debitis consectetur ipsum nihil. animi aspernatur molestiae non expedita accusamus temporibus dolorem explicabo
Cumque beatae ut voluptatibus ut nihil nihil. dolores accusantium non error. est molestias aut nisi est odit suscipit est a mollitia veniam ab facilis. veniam id aspernatur non
<!-- START widgets/acccordion component --><ulclass="accordion accordion--complex accordion--clear accordion__with-checkboxes"data-accordion-controls="false"><liclass="accordion__child accordion__child--awaiting-decision"><divid="ideacc558b69"data-accordion-triggerclass="accordion__toggle"tabindex="0"role="button"aria-expanded="false"aria-controls="id9c8f830903"><divclass="accordion__label--multiple-labels"><h2class="accordion__label">University of Tewkesbury</h2><divclass="accordion__label">Graffiti with Parkour Studies</div></div><divclass="accordion__badges"><spanclass="badge badge--application-status">AWAITING DECISION</span><spanclass="accordion__buttons"><!-- Multiaction button start --><divdata-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "right", "compact": true}'id="id1d69936cc3"><buttonclass="button"type="button">Magnam officiis</button><buttonclass="button"type="button">Maxime harum</button><buttonclass="button button--secondary"type="button">Corporis</button></div><!-- Multiaction button end --></span></div></div><divid="id9c8f830903"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="ideacc558b69"aria-hidden="true"role="region"><divclass="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><liclass="accordion__child accordion__child--awaiting-decision"><divid="id93e1f8329e"data-accordion-triggerclass="accordion__toggle accordion__toggle--with-checkbox"tabindex="0"role="button"aria-expanded="false"aria-controls="id1c232d42d7"><divclass="accordion__label--multiple-labels"><h2class="accordion__label">University of Cheltenham</h2><divclass="accordion__label">Graffiti with Parkour Studies</div></div><inputtype="checkbox"class="accordion__checkbox"name="checkbox_button"id="idb5e6cb16b3"value="checkbox_1"aria-label="Select row"onclick="event.stopPropagation();"><divclass="accordion__badges"><spanclass="badge badge--application-status">AWAITING DECISION</span><spanclass="accordion__buttons"><!-- Multiaction button start --><divdata-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "right", "compact": true}'id="id1d69936cc4"><buttonclass="button"type="button">Magnam officiis</button><buttonclass="button"type="button">Maxime harum</button><buttonclass="button button--secondary"type="button">Corporis</button></div><!-- Multiaction button end --></span></div></div><divid="id1c232d42d7"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="id93e1f8329e"aria-hidden="true"role="region"><divclass="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><liclass="accordion__child accordion__child--unsuccessful"><divid="id0cfa2730b1"data-accordion-triggerclass="accordion__toggle"tabindex="0"role="button"aria-expanded="false"aria-controls="id15724e9ad6"><divclass="accordion__label--multiple-labels"><h2class="accordion__label">University of the Malverns</h2><divclass="accordion__label">Advanced Techniques in Wax Crayon</div></div><divclass="accordion__badges"><spanclass="badge badge--application-status">Unsuccessful</span><spanclass="accordion__buttons"><!-- Multiaction button start --><divdata-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "right", "compact": true}'id="id1d69936cc5"><buttonclass="button"type="button">Magnam officiis</button><buttonclass="button"type="button">Maxime harum</button><buttonclass="button button--secondary"type="button">Corporis</button></div><!-- Multiaction button end --></span></div></div><divid="id15724e9ad6"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="id0cfa2730b1"aria-hidden="true"role="region"><divclass="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><liclass="accordion__child accordion__child--unsuccessful accordion__child--readonly"><divid="id00f90f75f7"data-accordion-triggerclass="accordion__toggle"tabindex="0"role="button"aria-expanded="false"aria-controls="idec2a36506e"><divclass="accordion__label--multiple-labels"><h2class="accordion__label">University of Bristol</h2><divclass="accordion__label">Advanced Techniques in Wax Crayon</div></div><divclass="accordion__badges"><spanclass="badge badge--application-status">Unsuccessful</span><spanclass="accordion__buttons"><!-- Multiaction button start --><divdata-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "right", "compact": true}'id="id1d69936cc6"><buttonclass="button"type="button">Magnam officiis</button><buttonclass="button"type="button">Maxime harum</button><buttonclass="button button--secondary"type="button">Corporis</button></div><!-- Multiaction button end --></span></div></div><divid="idec2a36506e"class="accordion__inner"data-accordion-state="collapsed"aria-labelledby="id00f90f75f7"aria-hidden="true"role="region"><divclass="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>