Accordion

A Small Beginning

It started with a simple idea scribbled on a quiet afternoon. What seemed like a tiny experiment slowly turned into something meaningful, growing with every small step forward.

The Unexpected Turn

No one saw it coming. A minor change in plans opened the door to a new opportunity, proving that sometimes the best outcomes arrive unannounced.

Lessons in Between

Not every moment was perfect, but each challenge carried a quiet lesson. Looking back, those in-between struggles shaped the journey the most.

A Quiet Victory

There was no loud celebration, just a deep breath and a soft smile. The achievement felt personal — a reminder that progress doesn’t always need an audience.

The Accordion Block allows you to organize large amounts of information into compact, expandable sections. It is the perfect tool for creating FAQs or detailed content lists, enabling visitors to click a header to reveal text while keeping the rest of the page clean and easy to navigate.

Accordion block is a nested block system consisting of a parent container(Accordion) and a child container(Accordion Item). To ensure a consistent design and effortless workflow, all styling and configuration settings are managed exclusively at the Parent level. When you update a setting on the parent block, it automatically syncs across every child item, saving you from repetitive manual edits.

Adding Content to Accordion

Heading/Title: Click directly on the Accordion Title placeholder. Type your desired heading or question. You can use the toolbar that appears to apply bold, italics, or inline links to specific words.
Description: Click into the Paragraph block located immediately below the heading. This area acts as the content body that reveals itself when the accordion is expanded. You can add text, images, or even other blocks here to provide a detailed explanation.
Add/Remove Item: To Add more items, simply click the (+) icon at the parent container’s toolbar to insert a fresh item. To Delete the item select the accordion item click the the 3 dots (⋮) and click on delete.

Settings ⚙

Accordion Panel

Spacing: Use the slider or input field to define the vertical gap between individual accordion items.
Title Tag: Select the appropriate heading level (H1–H6) or a Div tag to ensure proper SEO and page structure.
Title Justification: Align your header text to the Left, Center, or Right of the block.

Icons

Icon View: Toggle between Default (standard) or Stack (icon inside a shape).
Icon Layout: Choose Fill for a solid background or Outline for a bordered look.
Icon Gap: Adjust the specific spacing between the icon and the title text.
Icon Position: Set the icon to appear on either the Left or Right side of the title.
Icon Selection: Choose a Default Icon for closed items and an Active Icon to indicate when a section is expanded.

Style ◑

Container Styles

Background Color: Apply a solid color or gradient to the background.
Padding 🔗: Adjust the inner spacing for a more breathable layout.
Borders: Set the thickness, color, and style (Solid, Dashed, or Dotted).
Border Radius 🔗: Soften the edges by rounding the corners.

The Link Tool 🔗: The chain icon connects all four sides to keep your design even. It is on by default; toggle it off to enter different values for each side (e.g., rounding only the top corners).

Accordion Item Styling

Background Color: Apply a solid color or gradient to the background.
Padding 🔗: Adjust the inner spacing for a more breathable layout.
Borders: Set the thickness, color, and style (Solid, Dashed, or Dotted).
Border Radius 🔗: Soften the edges by rounding the corners.

Icon Styling

Fine-tune the visual appearance and animation of your accordion icons to match your brand’s style.

Size: Use the slider to scale the icon up or down.
Opacity: Adjust the transparency of the icon for a subtle or bold look.
Rotate: Set the starting angle of the icon when the item is closed.
Rotate Active: Define the rotation angle for when the item is expanded (e.g., rotating a plus into a minus).
Default Icon: Choose a color for the icon in its normal, closed state.
Active Icon: Select a contrasting color to highlight the icon when the section is open.

Title Style

The Title Styles allow you to control the typography and spacing of the accordion headings.

Margin Top & Bottom: Use these sliders to adjust the outer vertical space above and below the title. This helps you balance the heading within the header area or create separation from the content below.
Typography Settings: Access full control over your font, including font family, font size, weight, text decoration, letter case, line height, and letter spacing.
Default Color: Set the color of the title when the accordion item is closed.
Active Color: Choose a specific color for the title when the section is expanded to provide clear visual feedback.

Typography

The Typography Panel allows you to style the content revealed when an accordion item is expanded. These settings ensure your descriptions are easy to read and visually distinct from the headings.

Typography Settings: Access full control over your font, including font family, font size, weight, text decoration, letter case, line height, and letter spacing.
Text Color: Choose a default color for your description text to match your site’s color palette.