Accordion

Accordions toggle the visibility of sections of content. They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.

Officia eu id pariatur enim exercitation ipsum laboris irure reprehenderit

Exercitation officia pariatur minim exercitation elit anim aliquip nulla dolor. Labore non elit sunt commodo qui mollit quis anim in eu irure consectetur veniam. Proident non Lorem veniam fugiat do amet amet enim proident ullamco aliquip magna duis. Magna proident est in eiusmod enim in.

Aliqua est esse mollit excepteur esse quis deserunt enim nisi mollit velit velit. Minim ex et consequat velit est ullamco qui incididunt nostrud. Aute incididunt adipisicing sit non eu occaecat cupidatat elit non cillum ipsum est culpa. Cupidatat sint minim adipisicing est sunt elit.

Enim fugiat culpa consequat aute tempor. Amet esse elit adipisicing ad magna amet dolor nisi adipisicing. In consequat excepteur deserunt ut nulla duis non sit aute magna laborum. Ullamco tempor non consequat reprehenderit ex quis sint officia ut sit incididunt mollit. Sit Lorem commodo ullamco commodo.

Cupidatat non pariatur in elit id minim. Ipsum cillum et veniam mollit ipsum proident non qui do mollit aute aliquip sint. Do cillum esse culpa qui. Id sint voluptate eiusmod Lorem eiusmod nostrud aliquip adipisicing minim aliquip magna consequat. Ut enim nisi commodo officia laboris eu in qui et laborum deserunt officia ipsum nisi.

Ex consequat duis proident Lorem ex ipsum nisi veniam non Lorem. Exercitation laboris nostrud incididunt commodo do duis pariatur irure eiusmod velit aliquip. Quis aliquip eiusmod eiusmod minim aute sint ipsum proident ea est sint duis. Fugiat mollit consequat fugiat sunt proident proident sint commodo fugiat et. Id dolore consectetur dolor aliquip. Eiusmod exercitation incididunt veniam cillum nostrud adipisicing proident officia enim occaecat voluptate. Exercitation reprehenderit ullamco reprehenderit reprehenderit velit reprehenderit proident.

Exercitation pariatur amet nostrud fugiat voluptate. Cupidatat excepteur minim esse laboris deserunt elit ea fugiat laboris aute qui. Sit excepteur mollit elit aute. Quis laborum cupidatat voluptate sunt magna velit non aliquip proident deserunt. Mollit laborum aliqua irure cupidatat.

Ea mollit dolore nisi id veniam nisi dolor est commodo sunt non proident. Commodo cillum dolore consequat labore laborum aliqua in ad quis laborum reprehenderit non. Eiusmod quis irure tempor anim tempor quis pariatur est. Tempor nostrud veniam reprehenderit incididunt quis incididunt. Qui pariatur aliquip officia consequat voluptate duis fugiat occaecat.

Consectetur id nisi do ipsum anim labore mollit cillum fugiat elit

Amet dolor deserunt consectetur enim. Amet irure esse est minim sint eu aliquip officia nulla dolore proident. Voluptate dolore nisi aute ut amet quis elit. Id voluptate et ipsum commodo aute do. Eu excepteur sunt ex nostrud sit cillum eu excepteur aliqua fugiat. Tempor ad exercitation amet ad tempor esse.

Aliqua aliqua do fugiat incididunt voluptate eiusmod. Pariatur laborum aliquip cupidatat esse amet. Velit fugiat irure amet enim proident labore qui eu excepteur. Sit tempor officia ex nisi dolor. Culpa exercitation ad aliquip duis mollit ipsum.

Laboris minim qui magna dolore esse id magna. Anim labore ex pariatur magna est sint occaecat deserunt excepteur aliquip eiusmod laborum minim veniam. Aute commodo voluptate Lorem laborum voluptate minim nulla magna fugiat. Nulla ut dolor ipsum mollit dolore pariatur.

Eiusmod in voluptate excepteur ea aute Lorem pariatur minim. Adipisicing adipisicing irure commodo sunt et ullamco consectetur dolore occaecat ad. Culpa commodo est ea sit laborum.

Culpa dolore aute ipsum ut quis nulla Lorem sit deserunt

Ullamco culpa ad minim tempor id. Sit ad veniam pariatur incididunt occaecat sit in duis exercitation. Duis labore ullamco proident Lorem excepteur id commodo eiusmod.

Eu labore labore proident in cupidatat excepteur incididunt. Et tempor fugiat culpa et ea in quis labore cupidatat nulla. Cillum eiusmod non adipisicing ullamco est exercitation. Sint velit anim exercitation qui magna commodo tempor.

Ea laboris ullamco enim labore velit voluptate cupidatat do do ipsum enim cupidatat. Laboris excepteur voluptate veniam nulla laboris nostrud dolor aliquip et quis. Anim id irure ipsum culpa exercitation eiusmod consectetur ullamco velit ipsum. Id id eu eiusmod proident veniam. Sunt tempor voluptate ipsum consectetur excepteur aliquip ut labore et. Laborum excepteur tempor nisi deserunt do est in sint ex duis fugiat voluptate minim enim.

Ipsum exercitation eu esse incididunt nisi anim quis non ex anim pariatur labore deserunt

Aliquip dolore elit duis pariatur in ipsum eu adipisicing eiusmod proident occaecat ullamco cupidatat. Do anim reprehenderit in anim qui eiusmod Lorem. Amet fugiat dolor sint incididunt excepteur fugiat anim dolor tempor aliqua nulla esse incididunt aliquip. Deserunt enim et laborum proident reprehenderit culpa labore deserunt minim enim. In aliqua irure sint nulla sit ullamco elit non.

Non velit deserunt ea do ullamco adipisicing reprehenderit velit reprehenderit excepteur nisi sint ut. Eiusmod nulla consectetur fugiat aute excepteur consequat ex et aliquip reprehenderit Lorem nisi anim. Mollit amet esse anim enim non nostrud velit incididunt minim.

Proident minim pariatur anim aliqua reprehenderit irure nostrud ad non ipsum eiusmod laborum ea laboris. Aliquip cupidatat adipisicing culpa consequat aliqua ut aliqua ut commodo nostrud magna. Incididunt nisi voluptate culpa fugiat exercitation officia proident.

Fugiat ut cupidatat duis do veniam aliquip reprehenderit magna sint dolore anim sunt adipisicing. Mollit sint dolor nostrud cillum est nisi irure qui magna. Enim irure consectetur Lorem tempor sit ullamco elit nulla non incididunt dolor ullamco. Est proident ut eiusmod id adipisicing voluptate eiusmod tempor irure exercitation incididunt commodo. Cillum cillum esse Lorem ipsum laboris enim qui ipsum mollit commodo cillum exercitation. Pariatur deserunt pariatur nostrud proident minim. Est in dolor occaecat nisi do deserunt aliquip.

Sit amet minim sunt nisi ut dolore laboris enim est commodo. Mollit consectetur id aute duis. Do proident fugiat duis do quis qui aliqua excepteur ad cillum pariatur velit. Ea amet aute do sunt sint labore. Cupidatat ex magna consectetur aliquip exercitation sit adipisicing laborum. Magna officia reprehenderit duis dolore elit velit aliqua.

Nisi labore nostrud mollit qui exercitation ea velit cupidatat esse. Fugiat exercitation culpa ipsum commodo mollit dolore anim nostrud Lorem sit deserunt fugiat. Sit minim esse eiusmod fugiat labore minim officia ipsum aliquip amet enim. Fugiat cillum sint consequat non. Aute do do Lorem eu reprehenderit ut do labore.

Duis nisi ex irure dolore nulla et tempor adipisicing tempor commodo

Tempor dolor non magna consectetur. Dolore Lorem aliqua fugiat cupidatat enim non ea duis ex nulla magna cillum nisi. Id sit aliquip ipsum consequat quis elit exercitation esse. Proident sit exercitation culpa nulla anim incididunt cillum enim qui adipisicing exercitation nulla. Voluptate eiusmod aliquip magna enim velit culpa voluptate. Ipsum qui consequat aliqua enim incididunt occaecat fugiat reprehenderit minim in reprehenderit ullamco in. Mollit duis consectetur exercitation exercitation nisi minim laborum do.

Incididunt esse ipsum excepteur id do. Occaecat eiusmod ad tempor incididunt labore in voluptate Lorem sunt. Aliquip culpa aliqua et aliquip elit et consequat commodo dolore. Enim duis dolor deserunt veniam eiusmod. Duis Lorem aliqua amet qui enim irure consectetur ipsum. Eu consequat voluptate amet laborum non tempor sit adipisicing quis incididunt ipsum. Consequat reprehenderit tempor mollit sint nisi nulla in cillum.

Commodo proident consectetur aute nostrud eiusmod proident aute officia aliqua fugiat Lorem incididunt consectetur. Eiusmod aliquip incididunt aliquip Lorem incididunt pariatur nostrud consequat mollit. Esse dolore amet irure ad dolor irure ipsum ipsum proident mollit excepteur.

Enim sit aute voluptate velit esse occaecat consequat qui adipisicing. Qui eiusmod in qui voluptate Lorem veniam nulla ipsum reprehenderit labore commodo magna anim. Anim amet eu amet sunt amet excepteur proident exercitation. Non duis magna duis officia excepteur veniam voluptate non ullamco. Labore eu incididunt et esse fugiat duis occaecat adipisicing id occaecat elit anim aliqua laborum. Excepteur aliquip exercitation quis qui excepteur consectetur minim.

Irure Lorem ad esse aliqua culpa Lorem ea ullamco consectetur aliqua Lorem nostrud consectetur esse. Eiusmod reprehenderit deserunt eu laborum aliquip et in. Do nisi adipisicing nulla reprehenderit reprehenderit. Ex do ex cillum laborum elit ad veniam culpa aute reprehenderit irure. Do sint eu qui laborum consequat quis sint exercitation nulla id mollit adipisicing.

View live versions of these components and see how they can be customized.

View component via PatternFly Elements

Accordions can be used in light and dark themes. They consist of vertically-stacked panels that are separated by a thin line when collapsed. Every panel contains a section text label and a caret icon that rotates to indicate if a panel is collapsed or expanded. When a panel is expanded, it includes different styling that consists of an active border on the left and a slight drop shadow, also used for a Disclosure.

Expanded accordion panel with labels

Theme

Expanded accordion panel with labels
Expanded accordion panel with labels

Accordions are used for organizing blocks of content into sections in a contained space, like product information. This enables users to hide or reveal information as needed without being directed to another page unless they select an interactive element. Accordions are optimal components for comparing content because a user can expand multiple panels simultaneously.

Accordions are great for organizing content while reducing page scrolling at the same time, but a user could miss critical information if it’s hidden or if they have to expand too many panels. Consider if an accordion really needs to be used. If content is critical or if it requires more focus to read, don’t use an accordion.

Usage vs. Disclosure

Accordions need to have at least two section panels. If only one panel is needed, use a Disclosure instead. Accordions are used to organize more important information whereas a disclosure is used to store supplementary content that might not be a crucial part of the user experience.

Accordions feature slightly different styles than a disclosure. Accordions have the caret icon placed on the right after the section text label whereas a disclosure has the caret icon positioned on the left before the section text label.

Example of a collapsed accordion component
Example of a collapsed disclosure

Label formatting

Section text labels should be written concisely and be representative of the content within. Be mindful of lengthy character counts and how they’ll impact the appearance of accordions, especially on smaller screens or if they’re translated.

Content area

When a panel is expanded, it contains a content area under the section text label and the caret icon. It may contain the same elements that can also be used in other sections of a page, like text, cards, images, etc. Text shouldn’t exceed eight grid columns to maintain optimal readability.


Accordions require at least two panels. If only one panel is needed, use a disclosure instead.

Accordion with one collapsed panel

Text inside panels shouldn’t exceed eight grid columns to maintain optimal readability.

Accordion with one collapsed panel

States

Accordions can be collapsed and expanded to hide or reveal information when toggled. By default, they load with all panels collapsed (this can be customized), allowing users to get a high-level overview of the content.

Collapsing and expanding

Accordion panels can be collapsed or expanded by clicking on or tapping the container where the section text label and the caret icon are positioned. When a panel is collapsed, the caret icon points to the right. When a panel expands, the caret icon rotates 90º and points down, revealing the content inside.

Accordion with one panel expanded and cursors over the clickable zones

Multiple panels

Multiple panels can be expanded simultaneously or they can stack. Expanding one panel doesn’t collapse another which makes it easy to compare content in the same view.

Accordion with one panel expanded and cursors over the clickable zones

Tab order

When the Tab key is pressed repeatedly, the focus indicator moves from top to bottom. When a user expands a panel by pressing the Enter or Space keys, any interactive elements inside are added to the tab order before the focus indicator reaches the next panel.

Accordion with one panel expanded and cursors over the clickable zones

Accordions work well when used on both large and small screens.

Breakpoints

Accordions can be used on smaller screens, but the limited screen space makes content taller which might make users scroll more, so be careful about how much content is included.

Desktop

Expanded accordion on desktop

Tablet

Expanded accordion on tablet

Mobile

Expanded accordion on mobile

Accordions use PatternFly 4 spacers to define spacing values between elements.

Accordion with spacers
Nestled accordion with spacers

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.