Overview
An accordion is a stacked list of panels which allows users to expand or collapse information when selected. They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.
- Figma library
-
Ready - Responsive
-
Ready - RH Elements
-
Ready - webRH
-
Ready
Sample element
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.
Demos
View a live version of this component and see how it can be customized.
<rh-accordion>
<rh-accordion-header>
<h4>Item One</h4>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Two</h4>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Three</h4>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
</rh-accordion>
<script type="module">
import '@rhds/elements/rh-accordion/rh-accordion.js';
</script>
<rh-accordion> demo in a new tabWhen to use
- When space is at a premium and content cannot be displayed all at once
- When you need to condense a large amount of related information into sections
- When you need a way for users to read or compare sections of content simultaneously
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| Responsive |
|
Component responds to changing viewport sizes in Figma and the browser |
| RH Elements |
|
Component is available as a web component |
| webRH |
|
Component is available as a web component |
Related elements or patterns
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit
Red Hat legal and privacy links
