Accordion

Expandable/collapsible content sections for organizing information in a compact, progressive disclosure pattern.

Live Preview

Our products feature Manjish Glow Elixir Face Oil, rare Kashmiri Saffron, and over 16 potent Ayurvedic herbs carefully selected for their skin-nourishing properties.

Code

1<div class="accordion">
2  <div class="accordion__item">
3    <button
4      class="accordion__header"
5      aria-expanded="true"
6      aria-controls="content-1"
7    >
8      <span>What are the key ingredients?</span>
9      <svg class="accordion__icon accordion__icon--open" viewBox="0 0 24 24">
10        <path d="M19 9l-7 7-7-7" />
11      </svg>
12    </button>
13    <div id="content-1" class="accordion__content">
14      <div class="accordion__body">
15        Our products feature Manjish Glow Elixir Face Oil, rare Kashmiri Saffron,
16        and over 16 potent Ayurvedic herbs.
17      </div>
18    </div>
19  </div>
20
21  <div class="accordion__item">
22    <button
23      class="accordion__header"
24      aria-expanded="false"
25      aria-controls="content-2"
26    >
27      <span>How should I use this product?</span>
28      <svg class="accordion__icon" viewBox="0 0 24 24">
29        <path d="M19 9l-7 7-7-7" />
30      </svg>
31    </button>
32    <div id="content-2" class="accordion__content" hidden>
33      <div class="accordion__body">
34        Apply 3-5 drops to cleansed face. Massage gently
35        in upward circular motions.
36      </div>
37    </div>
38  </div>
39</div>

Brand Properties

Accordion Item

Property	Type	Brand Default	HoB Value	TAE Value
Margins	Mixed	0px left, 20px right, 0px bottom, 20px top	0px left, 20px right, 0px bottom, 20px top	0px left, 20px right, 0px bottom, 20px top
Padding	Input (px)	0	0	0
Corner Radius	Input (px)	0	0	0
Background	Dropdown	Color	Color	Color
Border Style	Dropdown	none	none	none
Opacity	Slider	100%	100%	100%
Shadow	Toggle	Off	Off	Off

Icon Properties

Property	Type	Brand Default	HoB Value	TAE Value
Select an Icon	Icon picker	FaCircle	FaCircle	FaCircle
Icon Size	Slider	10 px	10 px	10 px
Icon Color	Color picker (hex)	#000000	#038012	#1A5129

Collapsed Icon

Property	Type	Brand Default	HoB Value	TAE Value
Select an Icon	Icon picker	(varies)	(varies)	(varies)
Icon Size	Slider	10 px	10 px	10 px
Icon Color	Color picker (hex)	#000000	#038012	#1A5129

Expanded Icon

Property	Type	Brand Default	HoB Value	TAE Value
Select an Icon	Icon picker	(varies)	(varies)	(varies)
Icon Size	Slider	10 px	10 px	10 px
Icon Color	Color picker (hex)	#000000	#038012	#1A5129

Heading

Property	Type	Brand Default	HoB Value	TAE Value
Font	Dropdown	Open Sans	Larken	Merriweather
Weight	Dropdown	normal	normal	normal
Size	Dropdown	16px	20px	20px
Html Tag	Dropdown	H3	H3	H3
Text Alignment	4 options	left	left	left

Paragraph

Property	Type	Brand Default	HoB Value	TAE Value
Font	Dropdown	Open Sans	Open Sans	Open Sans
Weight	Dropdown	normal	normal	normal
Size	Dropdown	16px	20px	20px
Text Alignment	4 options	left	left	left
Margins	Mixed	0px left, 10px right, 0px bottom, 0px top	0px left, 10px right, 0px bottom, 0px top	0px left, 10px right, 0px bottom, 0px top

Variants

Bordered (Default)

This is the content that appears when expanded.

Separated

This is the content that appears when expanded.

Minimal (No Border)

This is the content that appears when expanded.

With Icons

Free shipping on orders over $50. Standard delivery 3-5 business days.

Accessibility

Use aria-expanded to indicate open/closed state
Connect headers to content with aria-controls and id
Headers should be <button> elements for keyboard access
Support Enter/Space to toggle, Tab to navigate between headers
Consider using aria-labelledby on content panels
Animate height changes smoothly to avoid jarring transitions

Do's and Don'ts

Do

Use for FAQ sections and product details
Keep headers concise and descriptive
Consider which item should be open by default
Use "allow multiple" for independent content
Provide visual feedback for expanded state

Don't

Hide critical information in accordions
Use for navigation menus (use proper nav)
Nest accordions within accordions
Make headers too long or complex
Use when content is short enough to show directly

Related Elements

Tab - For switching between views (horizontal)
Divider - For separating content sections
Accordion Components - Pre-built accordion layouts

Unmapped Brand Values

Brand	Property	Value	Notes
HoB	Primary Color	#038012	Used for icon colors, active states
HoB	Heading Font	Larken	Applied to accordion heading text
HoB	Body Font	Open Sans	Applied to accordion paragraph text
TAE	Primary Color	#1A5129	Used for icon colors, active states
TAE	Heading Font	Merriweather	Applied to accordion heading text
TAE	Body Font	Open Sans	Applied to accordion paragraph text