An accordion is a vertical stack of interactive headings used to toggle the display of further information.
<nve-accordion-group behavior-expand>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Workspace Settings</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
</nve-accordion-group>
Workspace Settings
Adjust workspace preferences and project configurations to customize your experience.
Installation
<script type="module">
import '@nvidia-elements/core/accordion/define.js';
</script>
<nve-accordion-group behavior-expand>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Workspace Settings</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
</nve-accordion-group>
nve api.get nve-accordion
Container
Demonstrates different container styles to accommodate visual weight and context.
Container Description flat Element has white space bounds but reduced visual container. inset Element container optimizes for embedding or inset placement inside another containing element.
Accordion container variants for different visual emphasis levels. Use default for standard sections, inset for elevated content within cards, and flat for minimal visual weight in dense layouts or sidebars.
<div nve-layout="column gap:md">
<nve-accordion-group behavior-expand>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">General</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Settings</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
</nve-accordion-group>
<nve-accordion-group container="inset" behavior-expand>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">General</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Settings</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
</nve-accordion-group>
<nve-accordion-group container="flat" behavior-expand>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">General</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Settings</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
</nve-accordion-group>
</div>
General
Adjust workspace preferences and project configurations to customize your experience.
Settings
Adjust workspace preferences and project configurations to customize your experience.
General
Adjust workspace preferences and project configurations to customize your experience.
Settings
Adjust workspace preferences and project configurations to customize your experience.
General
Adjust workspace preferences and project configurations to customize your experience.
Settings
Adjust workspace preferences and project configurations to customize your experience.
Disabled
This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. MDN
Disabled Description true The element has a disabled state and does not accept interaction. false The element has an enabled state and accepts interaction.
Disabled accordion state for read-only content display. Use when accordion sections are temporarily unavailable or conditionally accessible based on user permissions, providing visual feedback about inaccessible content.
<nve-accordion behavior-expand disabled>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Admin Settings</h2>
<p nve-text="body">Requires administrator access</p>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
Admin Settings
Requires administrator access
Adjust workspace preferences and project configurations to customize your experience.
Behavior Expand Single
Accordion group allowing only one section expanded at a time, automatically closing others. Use single-expand behavior when content sections are mutually exclusive or when you want to maintain compact vertical space by limiting expanded content to one section.
<nve-accordion-group behavior-expand-single>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Account Settings</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
<nve-accordion>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Security</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
</nve-accordion-group>
Account Settings
Adjust workspace preferences and project configurations to customize your experience.
Security
Adjust workspace preferences and project configurations to customize your experience.
Animated
Accordion with custom CSS transitions for enhanced visual feedback during state changes. Use animated accordions to provide smoother, more polished interactions, particularly in content-heavy interfaces where transitions help users track what changed.
<nve-accordion behavior-expand style="--transition: height 0.3s ease-in-out">
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Release Notes</h2>
<p nve-text="body">Version 3.2.0</p>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
Release Notes
Version 3.2.0
Adjust workspace preferences and project configurations to customize your experience.
icon elements to display for expand/collapse
Accordion with custom icon button that changes based on state. Use custom icons to provide more semantic indicators (e.g., plus/minus for add/remove patterns, chevron for expand/collapse).
<nve-accordion id="custom-icon-button-accordion">
<nve-icon-button slot="icon-button" icon-name="add" size="sm" container="flat"></nve-icon-button>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Additional Resources</h2>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
<script type="module">
const accordion = document.querySelector("#custom-icon-button-accordion");
const accordionHeader = accordion.querySelector("nve-accordion-header");
const iconButton = accordion.querySelector("nve-icon-button");
accordionHeader.addEventListener("click", () => toggle());
iconButton.addEventListener("click", () => toggle());
function toggle() {
accordion.expanded = !accordion.expanded;
iconButton.iconName = accordion.expanded ? "minus" : "add";
}
</script>
Additional Resources
Adjust workspace preferences and project configurations to customize your experience.
Actions
Accordion with action buttons in header for quick operations without expanding. Perfect for list items where users need both to view details and perform actions like edit, delete, or add, keeping common actions immediately accessible.
<nve-accordion behavior-expand>
<nve-accordion-header>
<h2 nve-text="heading xs medium" slot="prefix">Pipeline Configuration</h2>
<p nve-text="body">Last updated 2 hours ago <nve-button container="inline">view history</nve-button></p>
<nve-icon-button container="flat" icon-name="add" size="sm" slot="suffix"></nve-icon-button>
<nve-icon-button container="flat" icon-name="delete" size="sm" slot="suffix"></nve-icon-button>
</nve-accordion-header>
<nve-accordion-content
>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
>
</nve-accordion>
Pipeline Configuration
Last updated 2 hours ago
view history
Adjust workspace preferences and project configurations to customize your experience.
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days