Accordion

An accordion consists of a vertically stacked list of headers, which can be pressed to reveal or hide associated sections of content.

Usage

Code

Accessibility

<sl-accordion>
  <sl-accordion-item summary="Discovering Dinosaurs: A Prehistoric Adventure">
    Embark on a thrilling journey back in time to the age of dinosaurs...
  </sl-accordion-item>
  <sl-accordion-item summary="Geography Safari: Mapping Our World">
    ...
  </sl-accordion-item>
  <sl-accordion-item summary="Journey Through Ancient Civilizations">
    ...
  </sl-accordion-item>
  <sl-accordion-item summary="Math Magic - solving Puzzles with numbers">
    ...
  </sl-accordion-item>
</sl-accordion>

When to use

Chunking information and reducing clutter

Reduce cognitive load for users by simplifying the interface. When you have a large amount of content, consider using accordions to hide non-essential information initially. Place detailed content within the accordion panel. Users can press on the accordion title to reveal the hidden information.

When not to use

When most items need to be opened

If users need to open the majority of accordion items, it’s better to reveal all the content instead of hiding some. Accordion components are designed to manage content visibility efficiently. If most items need to be expanded, consider alternative designs that display content upfront.

Anatomy

Item	Name	Description	Optional
1	Header	Contains the section title and is control for revealing the panel.	No
2	Icon	Indicates if the panel is open or closed.	No
3	Panel	The section of content associated with an accordion header.	No

Figma Options

With these options, you can tweak the appearance of the accordion in Figma. They are available in the Design Panel so you can compose the accordion to exactly fit the user experience need for the use case you are working on.

Item	Options	Description
Accordion open	`all closed` `01` `02` `03` `04` `05` `06` `07` `08` `09` `10` `all open`	Determines which panel is open.
Edit mode	`boolean`	Displays slot components for inserting the content of all panels.
Show up (up to 01 including 10)	`boolean`	Determines if the item is visible.
State (for every visible panel)	`default` `hover` `active` `disabled`	Determines the state of the item.
Title (for every visible panel)	`value`	Displays the title of the item.

Embark on a thrilling journey back in time to the age of dinosaurs! Unearth fossils, learn about different species, and imagine what life was like when these colossal creatures roamed the Earth. From the mighty Tyrannosaurus rex to the gentle Brachiosaurus, this adventure will ignite your curiosity about our planet’s ancient past. Dig deep into the layers of history as you explore ancient landscapes, where once the ground trembled under the footsteps of massive sauropods. Feel the rush of adrenaline as you encounter the razor-sharp teeth of a Velociraptor, preserved in stone for millions of years. Discover the secrets of the skies with the Pteranodon, a winged reptile that soared above prehistoric oceans. Piece together the puzzle of evolution, observing how these remarkable creatures adapted to their environments over eons. Listen to the echoes of the past as you stand amidst towering ferns and cycads, imagining the rustle of dinosaur tails passing by. Witness the battle-scarred Triceratops, its frilled head adorned with formidable horns, a testament to survival in a harsh world. Feel the ground shake as the mighty Stegosaurus lumbers past, its plated back a fortress against predators. Explore, learn, and immerse yourself in the wonders of the Mesozoic era — Discovering Dinosaurs: A Prehistoric Adventure awaits! 🌎🦕🌿

Grab your compass and explore the globe! Discover continents, oceans, mountains, and rainforests. Study maps, learn about diverse cultures, and understand the impact of geography on our lives. From the Great Wall of China to the Amazon River, every place has a story. Let’s embark on a safari of knowledge! Navigate the vast expanse of Earth’s seven continents, each with its unique landscapes, people, and history. Dive into the azure depths of the Pacific Ocean, where mysterious creatures and hidden treasures await discovery. Scale the rugged peaks of the Himalayas, feeling the thin air and marveling at the world’s highest summits. Venture into the lush green heart of the Amazon rainforest, where biodiversity thrives in a symphony of life. Trace the ancient trade routes along the Silk Road, connecting civilizations and shaping cultural exchange. Stand on the edge of the Grand Canyon, a testament to the power of erosion and the passage of time. Explore the vibrant markets of Marrakech, where spices, textiles, and stories intertwine. Witness the dance of the Northern Lights in the Arctic Circle, a celestial spectacle that defies explanation. Marvel at the engineering marvel of the Panama Canal, bridging oceans and reshaping global commerce. As you journey through landscapes both familiar and foreign, remember that every place on our planet holds a piece of humanity’s shared narrative. Pack your curiosity, unfold your map, and let the Geography Safari begin! 🌎🌿🌍

Pack your virtual bags and travel through time to ancient Egypt, Greece, Rome, and beyond. Explore majestic pyramids, decode hieroglyphics, meet philosophers, and witness epic battles. Learn about the ingenious inventions, rich cultures, and captivating myths that shaped human history. Your passport to the past awaits! Step into the shadow of the Great Sphinx, its enigmatic gaze guarding secrets buried in the sands of the Nile. Sail the cerulean Aegean Sea, where the winds carry echoes of Odysseus’s legendary odyssey. Stand in the grandeur of the Colosseum, where gladiators clashed and emperors reveled in blood-soaked spectacles. Marvel at the Hanging Gardens of Babylon, a verdant oasis rising amidst the arid Mesopotamian plains. Listen to the whispers of the Oracle of Delphi, her cryptic prophecies shaping the fate of kingdoms. Trace the Silk Road, where silk, spices, and ideas flowed between East and West, connecting distant lands. Study the mathematical brilliance of Pythagoras, unraveling geometric truths that transcend time. Witness the Library of Alexandria, a beacon of knowledge that burned bright before fading into legend. Explore the terracotta army of Qin Shi Huang, silent sentinels guarding the emperor’s tomb. As you journey through the annals of antiquity, remember that every stone, every artifact, carries whispers of humanity’s enduring quest for meaning. Unearth the past, unravel mysteries, and embark on your epic adventure— Journey Through Ancient Civilizations awaits! 🌍🏛️🔍

Get ready to unlock the secrets of numbers! Dive into mathematical puzzles, brainteasers, and mind-bending riddles. Whether you’re deciphering patterns, calculating probabilities, or exploring geometric shapes, math becomes an enchanting adventure. Discover how math is not just about equations—it’s a magical language that shapes our world. Decipher Patterns: Unravel intricate sequences and hidden symmetries. From Fibonacci spirals to geometric progressions, every pattern holds a clue waiting to be revealed. Calculate Probabilities: Peek behind the curtain of chance. Explore dice rolls, card games, and probability puzzles. The magic lies in understanding randomness and predicting outcomes. Explore Geometric Shapes: Wander through the corridors of geometry. Triangles, circles, and polygons become portals to a world where angles dance, and symmetry weaves its spell. Beyond Equations: Math transcends mere equations. It’s a magical language that shapes our world. From fractals to prime numbers, each concept whispers secrets waiting to be heard. Unravel the Cryptic Sequences: Within the folds of numbers lie hidden patterns waiting to be deciphered. Whether it’s the Fibonacci sequence gracefully spiraling or the rhythmic beat of a geometric progression, each sequence whispers its secrets. Chance and Probability: Imagine rolling dice in a cosmic game. Probability dances in the shadows, revealing the unexpected. As cards shuffle and coins flip, we explore the delicate balance between randomness and predictability. Geometry’s Spell: Step into the kaleidoscope of shapes. Triangles, circles, and polygons become our guides.

<sl-accordion single>
  <sl-accordion-item summary="Discovering Dinosaurs: A Prehistoric Adventure">
    Embark on a thrilling journey back in time to the age of dinosaurs...
  </sl-accordion-item>
  <sl-accordion-item summary="Geography Safari: Mapping Our World">
    ...
  </sl-accordion-item>
  <sl-accordion-item summary="Journey Through Ancient Civilizations" disabled>
    ...
  </sl-accordion-item>
  <sl-accordion-item summary="Math Magic - solving Puzzles with numbers">
    ...
  </sl-accordion-item>
</sl-accordion>

Accordion item API

Component has a range of properties to define the experience in different use cases.

Properties

Name	Attribute	Type	Description
`disabled`	`disabled`	`boolean \| undefined`	Whether the element is disabled.
`open`	`open`	`boolean \| undefined`	Whether the details element is opened.
`summary`	`summary`	`string \| undefined`	A text shown in the header - as a title of the accordion item.

Methods

Name	Parameters	Return	Description
`focus`	`options?: FocusOptions`	`void`	This is a workaround for `delegatesFocus` not allowing you to select any text in the content of the accordion item. See https://issues.chromium.org/issues/40622041
`toggle`	`force?: boolean`	`void`	Toggles the component state between open or closed. If the `force` parameter is provided, the state will be set to the value of the parameter.

Events

Name	Event type	Description
`sl-toggle`	`SlToggleEvent<boolean>`	Emits when the accordion item has been toggled.

Slots

Name	Description
`default`	Body content for the accordion
`summary`	Header content for the accordion; use this if the `summary` property is not enough

CSS Parts

Name	Description
`summary`	Header element of the accordion-item
`panel`	The body of the accordion-item

Accordion API

Component has a range of properties to define the experience in different use cases.

Properties

Name	Attribute	Type	Default	Description
`items`	-	`AccordionItem[] \| undefined`		The slotted accordion items.
`single`	`single`	`boolean \| undefined`		Whether only one accordion item can be opened at once. By default, multiple accordion items can be opened.

Slots

Name	Description
`default`	The place for multiple `<sl-accordion-item>`

Alignment

The icons are left-aligned to improve the experience for users with low vision, as the expanded/collapsed indicator is closer to the accordion title.

Keyboard interactions

Each accordion is a tab stop. Space or Enter keys expand or collapse accordions, which are collapsed by default. Interactive elements within expanded accordions integrate into the tab order automatically.

WAI-ARIA

WAI-ARIA roles, states, and properties for an accordion provide essential information to assistive technologies and screen readers. They convey the accordion's role and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.

Accordion item

Attribute	Value	Description	User suppliedSpecifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)
`aria-expanded`	boolean	The header element (summary) contains `aria-expanded` attribute. When `true`, the associated content is shown; when `false`, it’s hidden.	no
`aria-controls`	string	The header element (summary) contains `aria-controls` attribute. This `id` references the hidden content beneath it - the accordion panel content. It contains `id` of the panel element.	no
`role`	`'region'`	Role of the panel container. Creates a landmark region that contains the currently expanded accordion item's panel.	no
`aria-labelledby`	string	Used to connect the content with accordion item summary (header). It contains `id` of the summary (header) element.	no

Interactive example