Accordion

Description

Creates collapsible content sections where clicking on headings (h2, h3, etc.) toggles the visibility of content below. Also includes reveal functionality for click-to-show content.

Usage

Wrap content in a container with class .accordion. The first child element type becomes the toggle trigger (typically h2). Content following each trigger is automatically wrapped and hidden.

Available Options

CSS Classes:
- .accordion - Main container
- .accordion-alt - Alternative styling without arrow indicators
- .no-toggle - Removes the toggle-all button
- .collapsing - Makes accordion behave like tabs (only one section open at a time)
Data Attributes:
- data-button="text" - Custom text for reveal button (default: "Reveal")
- data-min-text="number" - Minimum characters required before reveal button activates
- data-placeholder="text" - Placeholder text for textarea (when using min-text)
- data-rows="number" - Number of rows for textarea (default: 5)

Examples

Basic Accordion

Section 1

This content is hidden by default and will slide down when the heading is clicked.

You can include multiple paragraphs and other elements.

Section 2

Each heading becomes a clickable button that toggles its content section.

Lists work fine
As do other HTML elements

Section 3

Content sections are automatically wrapped and styled.

Accordion with Collapsing Behavior

Only One Open

With the .collapsing class, only one section can be open at a time.

Previous Section Closes

When you open this section, the previous one will automatically close.

Tab-like Behavior

This creates a tab-like interface using accordion functionality.

Accordion Without Toggle Button

No Toggle Button

This accordion doesn't have the toggle-all button in the top-left corner.

Manual Control Only

Users must click individual headings to open/close sections.

Reveal Content

This content is hidden until the reveal button is clicked.

Perfect for answers, solutions, or additional information.

Active Reveal with Text Input

This content requires the user to type at least 10 characters before the reveal button becomes active.

Great for encouraging reflection before showing answers.

Notes

The first child element type (h2, h3, etc.) becomes the toggle trigger
Content following each trigger is automatically wrapped in ._bellow containers
Accordion supports keyboard navigation (Enter/Space keys)
The toggle button (top-left) opens all closed sections or closes all open sections
Reveal functionality works independently of accordion structure
Use .accordion-alt for a cleaner look without arrow indicators