Accordions are a vertically stacked set of interactive headings that each contain a title, representing a section of content.
Cornerstone is a comprehensive library of web components you can use to build beautiful, accessible web
applications. It's built on open web standards and works with any framework.
The core Cornerstone library is completely free and open source. A Pro tier is also available with additional
components and features.
Yes! Cornerstone components are built as native web components, so they work with any framework including React,
Vue, Angular, Svelte, or plain HTML.
<cs-accordion><cs-accordion-itemlabel="What is Cornerstone?">
Cornerstone is a comprehensive library of web components you can use to build beautiful, accessible web
applications. It's built on open web standards and works with any framework.
</cs-accordion-item><cs-accordion-itemlabel="Is it free to use?">
The core Cornerstone library is completely free and open source. A Pro tier is also available with additional
components and features.
</cs-accordion-item><cs-accordion-itemlabel="Does it work with my framework?">
Yes! Cornerstone components are built as native web components, so they work with any framework including React,
Vue, Angular, Svelte, or plain HTML.
</cs-accordion-item></cs-accordion>
Accordions use accordion items to create a vertically stacked set of expandable sections.
Examples
Expanded Initially
Use the expanded attribute on an accordion item to expand it by default.
This item is expanded by default. Click the header to collapse it.
This item starts collapsed. Click the header to expand it.
<cs-accordion><cs-accordion-itemlabel="Already open"expanded>
This item is expanded by default. Click the header to collapse it.
</cs-accordion-item><cs-accordion-itemlabel="Click to open">
This item starts collapsed. Click the header to expand it.
</cs-accordion-item></cs-accordion>
Disabled
Use the disabled attribute on an accordion item to prevent it from being toggled.
This item can be expanded and collapsed normally.
This item is disabled and cannot be toggled.
<cs-accordion><cs-accordion-itemlabel="Active item"expanded>
This item can be expanded and collapsed normally.
</cs-accordion-item><cs-accordion-itemlabel="Disabled item"disabled> This item is disabled and cannot be toggled. </cs-accordion-item></cs-accordion>
Heading Level
Each accordion item wraps its trigger in a heading so screen reader users can navigate to it, per the W3C accordion pattern. The default is <h3>. Set the heading-level attribute to match your page’s hierarchy (values outside 1–6 fall back to 3). The level is semantic only; the accordion inherits the surrounding font, so the appearance is identical at every level.
This trigger is wrapped in an <h2>.
Match the level to where this accordion sits in your document outline.
<cs-accordionheading-level="2"><cs-accordion-itemlabel="Section one"> This trigger is wrapped in an <code><h2></code>. </cs-accordion-item><cs-accordion-itemlabel="Section two">
Match the level to where this accordion sits in your document outline.
</cs-accordion-item></cs-accordion>
If an accordion lives outside the document outline (inside a nav or another component with its own structure), set heading-level="none" to omit the heading wrapper and render the button directly.
Adjust your preferences here. Manage how and when you receive notifications.
<cs-accordionheading-level="none"><cs-accordion-itemlabel="Settings"> Adjust your preferences here. </cs-accordion-item><cs-accordion-itemlabel="Notifications"> Manage how and when you receive notifications. </cs-accordion-item></cs-accordion>
Size
The accordion’s text and expand/collapse icon scale with font-size. Setting font-size on a <cs-accordion> proportionally resizes the type and icon together.
Text and icon scale down together. Content here. The default size. Content here. Everything scales up together. Content here.
<cs-accordionstyle="font-size: 0.875rem;"><cs-accordion-itemlabel="Small accordion"> Text and icon scale down together. </cs-accordion-item><cs-accordion-itemlabel="Another item">Content here.</cs-accordion-item></cs-accordion><br/><cs-accordion><cs-accordion-itemlabel="Default accordion"> The default size. </cs-accordion-item><cs-accordion-itemlabel="Another item">Content here.</cs-accordion-item></cs-accordion><br/><cs-accordionstyle="font-size: 1.25rem;"><cs-accordion-itemlabel="Large accordion"> Everything scales up together. </cs-accordion-item><cs-accordion-itemlabel="Another item">Content here.</cs-accordion-item></cs-accordion>
Appearance
Use the appearance attribute to change the accordion’s visual appearance.
This is the default outlined appearance. It has a subtle border that helps it stand out without being too flashy.
More content here.
The filled-outlined appearance combines a filled header with an outlined body. It gives the summary a bit more
visual weight while keeping the content area clean.
More content here.
The filled appearance adds a background color to the entire component. Use this when you want the details to
really pop on the page.
More content here.
No bells and whistles on this one. The plain appearance strips away borders and backgrounds for a minimalist look.
More content here.
<divclass="cs-stack"><cs-accordion><cs-accordion-itemlabel="Outlined (default)">
This is the default outlined appearance. It has a subtle border that helps it stand out without being too flashy.
</cs-accordion-item><cs-accordion-itemlabel="Another item">More content here.</cs-accordion-item></cs-accordion><cs-accordionappearance="filled-outlined"><cs-accordion-itemlabel="Filled-outlined">
The filled-outlined appearance combines a filled header with an outlined body. It gives the summary a bit more
visual weight while keeping the content area clean.
</cs-accordion-item><cs-accordion-itemlabel="Another item">More content here.</cs-accordion-item></cs-accordion><cs-accordionappearance="filled"><cs-accordion-itemlabel="Filled">
The filled appearance adds a background color to the entire component. Use this when you want the details to
really pop on the page.
</cs-accordion-item><cs-accordion-itemlabel="Another item">More content here.</cs-accordion-item></cs-accordion><cs-accordionappearance="plain"><cs-accordion-itemlabel="Plain">
No bells and whistles on this one. The plain appearance strips away borders and backgrounds for a minimalist look.
</cs-accordion-item><cs-accordion-itemlabel="Another item">More content here.</cs-accordion-item></cs-accordion></div>
Mode
Use the mode attribute to control how items can be expanded.
Mode
Behavior
multipledefault
Any number of items open at once; each toggles independently
single
One item open at a time; opening another collapses it, and clicking the open item keeps it open
single-collapsible
Like single, but clicking the open item closes it — so zero open items is a valid state
Opening another section will automatically collapse this one. Only one section can be open at a time.
Try opening this section to see section one collapse automatically.
Clicking an already-open section won't close it — open another instead.
<cs-accordionmode="single"><cs-accordion-itemlabel="Section one"expanded>
Opening another section will automatically collapse this one. Only one section can be open at a time.
</cs-accordion-item><cs-accordion-itemlabel="Section two">
Try opening this section to see section one collapse automatically.
</cs-accordion-item><cs-accordion-itemlabel="Section three">
Clicking an already-open section won't close it — open another instead.
</cs-accordion-item></cs-accordion>
Use single-collapsible when you want the same one-at-a-time constraint but still want users to be able to close every section.
Opening another section will collapse this one, and clicking the open section closes it.
Try opening and closing each section in turn. Zero open sections is a valid state in this mode.
<cs-accordionmode="single-collapsible"><cs-accordion-itemlabel="Filters">
Opening another section will collapse this one, and clicking the open section closes it.
</cs-accordion-item><cs-accordion-itemlabel="Sort"> Try opening and closing each section in turn. </cs-accordion-item><cs-accordion-itemlabel="Display"> Zero open sections is a valid state in this mode. </cs-accordion-item></cs-accordion>
Icon Placement
The expand/collapse icon appears at the end of each header by default. Set icon-placement="start" to move it to the beginning, a common pattern for sidebars and tree style navigation.
Icon is at the start of the header.More content here.
<cs-accordionicon-placement="start"><cs-accordion-itemlabel="Start">Icon is at the start of the header.</cs-accordion-item><cs-accordion-itemlabel="Another item">More content here.</cs-accordion-item></cs-accordion>
Custom Icon
Use the icon slot on an accordion item to replace the default expand/collapse icon with any icon you like.
By default the icon rotates as the item expands. You can target the icon part with ::part(icon) to customize the rotation, or set rotate: none to prevent the animation and swap the icon instead. Because expanded reflects an attribute, [expanded]::part(icon) lets you style each state.
Replace the default chevron and customize how it rotates.
Prevent the rotation and swap + for − when the item expands.
<cs-accordion><cs-accordion-itemlabel="Rotate a custom icon"class="circle-plus"><cs-iconslot="icon"name="add_circle"></cs-icon>
Replace the default chevron and customize how it rotates.
</cs-accordion-item><cs-accordion-itemlabel="Swap the icon instead"class="plus-minus"><cs-iconslot="icon"name="add_box"data-when="collapsed"></cs-icon><cs-iconslot="icon"name="indeterminate_check_box"data-when="expanded"></cs-icon>
Prevent the rotation and swap + for − when the item expands.
</cs-accordion-item></cs-accordion><style>/* Customize the rotation when expanded */cs-accordion-item.circle-plus[expanded]::part(icon){rotate: 225deg;}/* Prevent the default rotation animation… */cs-accordion-item.plus-minus::part(icon){rotate: none;}/* …and swap the icon based on the expanded state */cs-accordion-item.plus-minus [data-when='expanded']{display: none;}cs-accordion-item.plus-minus[expanded] [data-when='collapsed']{display: none;}cs-accordion-item.plus-minus[expanded] [data-when='expanded']{display: inline-flex;}</style>
HTML in the Label
To place HTML in an accordion item’s header, use the label slot instead of the label attribute. This lets you add icons, badges, or other elements alongside the label text.
Tasks3 ready
All three tasks are ready to be reviewed.
Issues2 open
There are two open issues that need your attention.
<cs-accordion><cs-accordion-item><divslot="label"class="cs-split"><span>Tasks</span><cs-badgeappearance="filled"variant="success"style="font-size:var(--cs-font-size-xs);">3 ready</cs-badge></div>
All three tasks are ready to be reviewed.
</cs-accordion-item><cs-accordion-item><divslot="label"class="cs-split"><span>Issues</span><cs-badgeappearance="filled"variant="danger"style="font-size:var(--cs-font-size-xs);">2 open</cs-badge></div>
There are two open issues that need your attention.
</cs-accordion-item></cs-accordion>
Expand & Collapse All
Use the expandAll() and collapseAll() methods to programmatically control all items at once. Note that expandAll() is a no-op when mode is single or single-collapsible.
Content for the first section.Content for the second section.Content for the third section.
Expand AllCollapse All
<div><cs-accordionid="accordion-methods"><cs-accordion-itemlabel="Section one">Content for the first section.</cs-accordion-item><cs-accordion-itemlabel="Section two">Content for the second section.</cs-accordion-item><cs-accordion-itemlabel="Section three">Content for the third section.</cs-accordion-item></cs-accordion><cs-divider></cs-divider><divclass="cs-cluster"><cs-buttonappearance="filled"id="expand-all">Expand All</cs-button><cs-buttonappearance="filled"id="collapse-all">Collapse All</cs-button></div></div><scripttype="module">const accordion = document.querySelector('#accordion-methods');
document.querySelector('#expand-all').addEventListener('click',()=> accordion.expandAll());
document.querySelector('#collapse-all').addEventListener('click',()=> accordion.collapseAll());</script>
Nested Accordions
Place a <cs-accordion> inside an accordion item’s default slot to nest one accordion inside another. Each accordion manages its own items independently, so toggling an inner item won’t affect outer items, and properties like mode apply only to direct children.
Crisp, sweet, and great for pies.Juicy and packed with vitamin C.Soft, sweet, and easy to peel.Crunchy and rich in beta carotene.A nutrient-dense cruciferous vegetable.
<cs-accordion><cs-accordion-itemlabel="Fruits"expanded><cs-accordionmode="single"><cs-accordion-itemlabel="Apples">Crisp, sweet, and great for pies.</cs-accordion-item><cs-accordion-itemlabel="Oranges">Juicy and packed with vitamin C.</cs-accordion-item><cs-accordion-itemlabel="Bananas">Soft, sweet, and easy to peel.</cs-accordion-item></cs-accordion></cs-accordion-item><cs-accordion-itemlabel="Vegetables"><cs-accordionmode="single"><cs-accordion-itemlabel="Carrots">Crunchy and rich in beta carotene.</cs-accordion-item><cs-accordion-itemlabel="Broccoli">A nutrient-dense cruciferous vegetable.</cs-accordion-item></cs-accordion></cs-accordion-item></cs-accordion>
Preventing Expand or Collapse
Listen for the cs-accordion-expand or cs-accordion-collapse events and call event.preventDefault() to stop the action from completing. The event.detail.item property tells you which accordion item triggered the event.
This item is locked open — the cs-accordion-collapse event is being intercepted and prevented.
This item can be toggled normally.
<cs-accordionid="accordion-prevent"><cs-accordion-itemlabel="Locked open"expanded>
This item is locked open — the <code>cs-accordion-collapse</code> event is being intercepted and prevented.
</cs-accordion-item><cs-accordion-itemlabel="Works normally"> This item can be toggled normally. </cs-accordion-item></cs-accordion><scripttype="module">const accordion = document.querySelector('#accordion-prevent');const lockedItem = accordion.querySelector('cs-accordion-item');
accordion.addEventListener('cs-accordion-collapse',event=>{if(event.detail.item === lockedItem){
event.preventDefault();}});</script>
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import
needed. To cherry-pick this component, use one of the following snippets.
The heading level for child item triggers (1–6), or "none" to omit the heading wrapper. Defaults to 3.
string
'3'
Yes
iconPlacement
icon-placement
The location of the expand/collapse icon in child items.
'start' | 'end'
'end'
Yes
mode
mode
Controls how items can be expanded. multiple (the default) allows any number of items to be open at once. single allows only one item to be open at a time; opening a new item collapses the previously open one, and clicking an open item does not collapse it. single-collapsible is the same as single except that clicking the open item collapses it, so zero open items is a valid state.
