Accordion

Styles and utilities for creating interactive accordions that organize information into collapsible sections.
Local
Accordion behavior is controlled through the Interactions (X) panel.

The Independent type uses Accordion Independent - Toggle, allowing each accordion item to open and close independently.

The Single-Open type uses Accordion Single - Open and Accordion Single - Close, ensuring only one accordion item remains open at a time.

Keep these interactions connected to the documented accordion classes and structure. Removing, renaming, or retargeting the trigger and navigation elements may prevent the accordion from opening, closing, or completing its animation correctly.

Q&A Style

Question-and-answer accordion styles designed for FAQs, support sections, and structured content that reveals answers only when needed. Animations are controlled through interactions: the independent type uses a toggle interaction, while the single-open type uses separate open and close button interactions.
Independent
Single-Open
accordion
|
|
accordion-toggle
i-independent
|
accordion-navigation
accordion
|
|
accordion-toggle
is-single-open
|
|
accordion-single-open
|
accordion-single-close
|
accordion-navigation
Plus/Minus 
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Plus/Exit 
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Arrow 
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.
Disabled
accordion
disabled
Accordion Item Heading
This example content serves as a stand-in for actual writing that would typically appear in its place.

Button Style

Built with the independent accordion type.
accordion
|
|
accordion-toggle
i-independent
|
accordion-navigation
Same Style & Same Content
Accordion Button
This example content serves as a stand-in for actual writing that would typically appear in its place.
Same Style & Different Content
Accordion Open
Accordion Close
This example content serves as a stand-in for actual writing that would typically appear in its place.
Different Style & Different Content
Accordion Open
Accordion Close
This example content serves as a stand-in for actual writing that would typically appear in its place.

Accordion Elements

Accordion System Container
accordion
Toggle
Base
accordion-toggle
Independent
accordion-toggle
i-independent
Single Open
accordion-toggle
is-single-open
Buttons
Single-Open Button
accordion-single-open
Single-Close Button
accordion-single-close
Note: Element is hidden by default.
Navigation
Base
accordion-navigation
Note: Element is hidden by default.
Global

Read More Style

A progressive disclosure component that reveals additional content on demand, with support for character-based and row-based text limits.
read-more
|
|
read-more-content
|
|
read-more-text
|
|
read-more-button
|
read-more-overlay
|
read-more-additional-content
Limit by Characters
Limit by Rows
Start Collapsed
This section provides additional context and detail that may be useful for users who want a deeper understanding of the topic. The initial content is intentionally concise, allowing the layout to remain clean and focused while still offering access to extended information when needed. When expanded, this area can contain longer explanations, supporting details, clarifications, or background information that would otherwise interrupt the primary flow of the page. This pattern is especially useful for handling dense content, optional reading, or secondary information that not all users need immediately.

The Read More interaction helps balance clarity and depth by revealing content progressively. It allows users to stay in control of how much information they consume, while keeping the overall interface visually simple and approachable. This makes it suitable for descriptions, biographies, FAQs, product details, or any scenario where brevity and completeness need to coexist.

By placing extended content behind a deliberate user action, this component improves scannability and reduces cognitive load, without sacrificing access to important information. Once expanded, the full text remains part of the natural page flow and can be collapsed again to restore the original layout.
More
Less
The content in this div is always visible, independent of the collapsed or expanded state.
Additional content is displayed only when the text is truncated and the component is expanded. If the text is not truncated, the content remains visible alongside the main text by default.
This section provides additional context and detail that may be useful for users who want a deeper understanding of the topic. The initial content is intentionally concise, allowing the layout to remain clean and focused while still offering access to extended information when needed. When expanded, this area can contain longer explanations, supporting details, clarifications, or background information that would otherwise interrupt the primary flow of the page. This pattern is especially useful for handling dense content, optional reading, or secondary information that not all users need immediately.

The Read More interaction helps balance clarity and depth by revealing content progressively. It allows users to stay in control of how much information they consume, while keeping the overall interface visually simple and approachable. This makes it suitable for descriptions, biographies, FAQs, product details, or any scenario where brevity and completeness need to coexist.

By placing extended content behind a deliberate user action, this component improves scannability and reduces cognitive load, without sacrificing access to important information. Once expanded, the full text remains part of the natural page flow and can be collapsed again to restore the original layout.
More
Less
The content in this div is always visible, independent of the collapsed or expanded state.
Additional content is displayed only when the text is truncated and the component is expanded. If the text is not truncated, the content remains visible alongside the main text by default.
Start Expanded
This section provides additional context and detail that may be useful for users who want a deeper understanding of the topic. The initial content is intentionally concise, allowing the layout to remain clean and focused while still offering access to extended information when needed. When expanded, this area can contain longer explanations, supporting details, clarifications, or background information that would otherwise interrupt the primary flow of the page. This pattern is especially useful for handling dense content, optional reading, or secondary information that not all users need immediately.

The Read More interaction helps balance clarity and depth by revealing content progressively. It allows users to stay in control of how much information they consume, while keeping the overall interface visually simple and approachable. This makes it suitable for descriptions, biographies, FAQs, product details, or any scenario where brevity and completeness need to coexist.

By placing extended content behind a deliberate user action, this component improves scannability and reduces cognitive load, without sacrificing access to important information. Once expanded, the full text remains part of the natural page flow and can be collapsed again to restore the original layout.
More
Less
The content in this div is always visible, independent of the collapsed or expanded state.
Additional content is displayed only when the text is truncated and the component is expanded. If the text is not truncated, the content remains visible alongside the main text by default.
This section provides additional context and detail that may be useful for users who want a deeper understanding of the topic. The initial content is intentionally concise, allowing the layout to remain clean and focused while still offering access to extended information when needed. When expanded, this area can contain longer explanations, supporting details, clarifications, or background information that would otherwise interrupt the primary flow of the page. This pattern is especially useful for handling dense content, optional reading, or secondary information that not all users need immediately.

The Read More interaction helps balance clarity and depth by revealing content progressively. It allows users to stay in control of how much information they consume, while keeping the overall interface visually simple and approachable. This makes it suitable for descriptions, biographies, FAQs, product details, or any scenario where brevity and completeness need to coexist.

By placing extended content behind a deliberate user action, this component improves scannability and reduces cognitive load, without sacrificing access to important information. Once expanded, the full text remains part of the natural page flow and can be collapsed again to restore the original layout.
More
Less
The content in this div is always visible, independent of the collapsed or expanded state.
Additional content is displayed only when the text is truncated and the component is expanded. If the text is not truncated, the content remains visible alongside the main text by default.

Read More Elements

Limit by Characters
Limit by Rows
Read More System Container
read-more
Start Collapsed
b-read-more = wrap
b-read-more-mode = chars
-
b-read-more = wrap
b-read-more-mode = chars
Start Expanded
b-read-more = wrap
b-read-more-mode = chars
b-read-more-start = expanded
-
b-read-more = wrap
b-read-more-mode = chars
b-read-more-start = expanded
Content Wrapper
read-more-content
b-read-more = content
b-read-more-chars = #
b-read-more = content
b-read-more-rows = #
Additional Content
read-more-additional-content
b-read-more = additional-content
Buttons
read-more-button
More Button
b-read-more = more-button
Less Button
b-read-more = less-button
More Overlay
b-read-more = more-button
Note: Element is hidden by default.
Less Overlay
b-read-more = less-button
Note: Element is hidden by default.
Custom Behavior -
Read More
Required Structure
‍Each Read More instance must follow this custom attribute structure per class style:

read-more‍

b-read-more = wrap

b-read-more-mode = chars or b-read-more-mode = rows

b-read-more-start = expanded is optional

‍

--------------------

‍

read-more-content 

‍b-read-more = content

b-read-more-chars = # or b-read-more-rows = #

‍

--------------------

‍

read-more-text 

‍

--------------------

‍

read-more-button and read-more-overlay

b-read-more = more-button or b-read-more = less-button

‍

--------------------

‍

read-more-additional-content

b-read-more = additional-content

‍

Rows mode

Provides the smoothest transition when using both buttons (More and Less). This mode preserves punctuation when it appears as the final character before the ellipsis (…). Use when truncating text by number of visible lines.

Required attributes:

b-read-more-mode = rows on read-more

b-read-more-rows = 1–10 on read-more-content; minimum 1 and maximum 10 rows in collapsed state

The script automatically:

  • Detects overflow
  • Hides buttons if text does not exceed the set number of rows

‍

Characters mode

Provides the smoothest transition (0.2s-0.5s) when using a single button (More or Less). This mode hides punctuation when it appears as the final character before the ellipsis (…). Use when truncating text by character count.

Required attributes:

b-read-more-mode = chars on read-more

b-read-more-chars = # on read-more-content; replace # with the maximum number of characters to display in collapsed state

The script:

  • Truncates content safely (word-aware)
  • Preserves inline formatting and links
  • Adds an ellipsis (…) automatically

‍

Start State (Optional)

By default, each Read More instance starts collapsed.

To make an instance start expanded, add the attribute b-read-more-start = expanded to read-more.

This works in both row and character modes.

‍

Transitions & Animations (Important)

⚠️ This script does NOT define animation timing.
All animations are controlled entirely through the Styler.

Control the transition speed by adjusting the transition settings on read-more-content in the Style panel.

‍

Disable animation (snap instead of animate):

  • Set transition duration to 0ms
  • Or remove the transition entirely

The script automatically:

  • Detects whether a transition exists
  • Waits for it to finish
  • Cleans up state without snapping

No code edits required.

‍

Buttons During Animation

While the text is expanding or collapsing:

  • More / Less buttons are temporarily hidden
  • Buttons reappear automatically once the transition ends

‍

Accessibility (ARIA)

The component includes accessibility best practices:

  • aria-expanded is updated automatically
  • Buttons are keyboard-accessible
  • Screen readers correctly announce expanded / collapsed state

No extra setup required.

‍

Links Inside Text

All links inside b-read-more = content are automatically elevated with z-index: 1  to ensure:

  • They remain clickable
  • They are not blocked by overlays or transitions

‍

Optional Interactive Elements (Buttons & Overlays)

This Read More system is fully modular.
Any element that uses a valid Read More button attribute acts as a trigger — including overlays placed on top of the text.

‍

Overlays as click triggers

Overlays can act as interactive triggers in the same way as buttons.

To make an overlay clickable, just add a custom attribute: b-read-more = more-button or b-read-more = less-button

This allows users to:

  • Click the overlay
  • Click the text button
  • Or click both

All triggers behave identically.

‍

Removing overlays

If you remove an overlay element:

  • The remaining buttons continue to work
  • The Read More logic remains intact
  • No code changes are required

Overlays are optional interaction enhancers, not required elements.

‍

Removing the Less button (one-way expansion)

If you remove: b-read-more = less-button

Result:

  • Text expands
  • Text does not collapse again
  • Useful for teaser → full content patterns

‍

Important Behavior Note

The script:

  • Detects all elements with b-read-more = more-button and b-read-more = less-button
  • Attaches handlers to each one
  • Does not assume a specific layout or element type

This means:

  • Buttons can be text, icons, divs, overlays, or layers
  • Placement is completely flexible

‍

Additional Content

Use b-read-more = additional-content for any extra elements that should expand and collapse together with the Read More text.

  • When the text is collapsed, all additional-content elements inside the same b-read-more = wrap will smoothly collapse to height: 0.
  • When the text is expanded, they expand back to their natural height (auto).
  • If the text is not truncated (shorter than the row or character limit), the additional content stays fully visible.
  • Transition speed and easing are controlled entirely via the Styler on the element with b-read-more = additional-content (usually by animating height).
  • You can use this for overlays, extra descriptions, images, meta info, or any supporting UI that should follow the Read More state.

If you remove the element or don’t need extra content, the Read More system continues to work normally.

‍

Summary (Interaction Flexibility)

You are free to:

  • Use buttons, overlays, or both
  • Remove buttons or overlays without breaking anything
  • Create click-anywhere-to-expand experiences
  • Mix visual styles without touching code

All Read More triggers are attribute-based — not element-type dependent.