Accordion

Use Accordion to present expandable content sections in a compact layout with manual items or post-based content.

Usage

Use Accordion to display content in expandable and collapsible sections. Build items manually with custom content, or generate them dynamically from posts, pages, or custom post types.

This module is especially useful for FAQs, product details, onboarding steps, support answers, and any content that benefits from clear structure and progressive disclosure.

Module Settings

The Accordion module settings control where accordion items come from, how item labels and content behave, and how the accordion looks on the front end.

Items Tab

The Items tab defines the item source, item content, and expand or collapse behavior.

Content Source Default: Custom Content

Selects whether accordion items come from WordPress posts or manual entries created inside the module.

• Post: Builds accordion items from queried WordPress posts, pages, or custom post types.
• Custom Content: Builds accordion items from manual items added directly in the module.

Post Settings

Post

The Post section configures the query used when Content Source is set to Post.

Post Query

Post Type Default: Post

Selects one or more post types to query for accordion items.

Posts Per Page Default: 5

Sets how many queried posts appear as accordion items.

Ordering settings

Ordering settings control how queried posts or items are sorted, such as by date, title, menu order, or custom ordering options where available.

Filtering settings

Filtering settings control which posts, terms, authors, or content types are included or excluded from the module output.

Custom Content Settings

Custom Content

The Custom Content section manages manual accordion items created inside the module.

Accordion Items

Item

Adds one or more accordion items and stores the label and content settings for each item.

Item Settings

Label Supports: Field Connections

Sets the heading text displayed for the accordion item.

Type Default: Custom Content

Selects whether the item uses custom editor content or a saved Beaver Builder asset.

• Saved Row: Loads a saved row into the accordion item.
• Saved Column: Loads a saved column into the accordion item.
• Saved Module: Loads a saved module into the accordion item.
• Saved Template: Loads a saved template into the accordion item.
• Custom Content: Uses editor content added directly in the accordion item.

Select Row

Select Row (Saved Row Only)

When you choose Saved Row as the Type, the Select Saved Row setting becomes available and lists all saved row items you have created. Select one to use that saved row as the accordion item’s content.

Select Column

Select Column (Saved Column Only)

When you choose Saved Column as the Type, the Select Saved Column setting becomes available and lists all saved column items you have created. Select one to use that saved column as the accordion item’s content.

Select Modules

Select Modules (Saved Module Only)

When you choose Saved Module as the Type, the Select Saved Module setting becomes available and lists all saved module items you have created. Select one to use that saved module as the accordion item’s content.

Select Template

Select Template (Saved Template Only)

When you choose Template as the Type, the Select Template setting becomes available and lists all templates you have created. Select one to use that template as the accordion item’s content.

Content

Content (Custom Content Only) Supports: Field Connections

Add your own custom content using the WordPress Classic Editor when Type is set to Custom Content.

Display

The Display section controls label markup, post output, and expand or collapse behavior.

Display Settings

Label Tag Default: h2

Sets the HTML tag used for each accordion label.

• a: Renders the label with an anchor element that keeps heading semantics.
• h1: Renders the label with an <h1> heading.
• h2: Renders the label with an <h2> heading.
• h3: Renders the label with an <h3> heading.
• h4: Renders the label with an <h4> heading.
• h5: Renders the label with an <h5> heading.
• h6: Renders the label with an <h6> heading.
• div: Renders the label with a <div> element.
• span: Renders the label with a <span> element.

Content Type (Post Only) Default: Post Content

Selects whether post-based items render full post content or post excerpts. This field appears when Content Source is set to Post.

• Post Content: Displays the full post content inside each accordion item.
• Post Excerpt: Displays the post excerpt and reveals excerpt display settings.

Excerpt Settings

Excerpt Length (Post Excerpt Only)

Sets the number of words shown in each post excerpt.

Excerpt More Text (Post Excerpt Only) Default: ...

Sets the text appended after each excerpt.

More Link (Post Excerpt Only) Default: Hide

Shows or hides a link below each post excerpt.

• Show: Displays a link below the excerpt and reveals More Link Text.
• Hide: Removes the excerpt link.

More Link Text

More Link Text (Show Only) Default: Read More

Sets the label used for the post excerpt link when More Link is set to Show.

Expand on Tab Default: No

Expands an accordion item when its button receives keyboard focus through tab navigation.

• Yes: Opens an accordion item when keyboard users tab to its label.
• No: Keeps tab focus from expanding accordion items automatically.

Collapse Inactive Default: Yes

Keeps only one item open at a time or allows multiple items to remain open.

• Yes: Keeps only one accordion item open at a time.
• No: Allows multiple accordion items to stay open at the same time.

Expand First Item Default: No

Expands the first accordion item when the module loads.

• Yes: Opens the first accordion item by default when the module loads.
• No: Leaves all accordion items collapsed on load.

Style Tab

The Style tab controls the size, spacing, colors, icons, and content styling used by the accordion.

Item Size Default: Small

Sets the preset size used for accordion labels.

• Small: Keeps the accordion labels compact. Inherits the font size from the theme or parent element.
• Medium: Uses a balanced label size for most layouts. Sets the label font size to 20px.
• Large: Gives the accordion labels more visual emphasis. Sets the label font size to 26px.

Item Spacing Default: 10; Supports: Responsive

Sets the spacing between accordion items.

Item Border Supports: Responsive

Configures the border style, width, radius, and color for each accordion item.

tip

The Responsive Toggle lets you set different border values for desktop, tablet, and mobile. The Width and Radius controls also support Link Values so you can keep all sides or corners in sync.

General

Style Default: Default

Selects the line style used for the border.

Available options

• Default
• None
• Solid
• Dashed
• Dotted
• Double

Default uses the module or theme's built-in border styling when one is available. Choose None to remove the visible border without clearing any saved width, color, or radius values.

Color

Sets the border color using the color picker. This field also supports alpha transparency.

Width Supports: Responsive, Link Values

Sets the border width for the top, right, bottom, and left sides using px.

Click into any width field to open a slider, or type a value directly for more precise control.

Radius & Shadow

Radius Supports: Responsive, Link Values

Rounds the corners by setting the top-left, top-right, bottom-right, and bottom-left radius in px.

Larger matching values create softer corners, and very high values can produce pill or circular shapes when the element dimensions allow it.

Box Shadow

Adds a shadow around the element to create depth and separation from surrounding content.

Box Shadow settings

Color

Sets the shadow color and opacity.

X

Sets the horizontal shadow offset. Positive values move the shadow to the right, and negative values move it to the left.

Y

Sets the vertical shadow offset. Positive values move the shadow downward, and negative values move it upward.

Blur

Softens the shadow edge. Higher values create a blurrier, more diffuse shadow.

Spread

Expands or contracts the overall size of the shadow. Positive values make the shadow larger, and negative values pull it inward.

Label

The Label section controls the appearance of accordion headings.

Label Settings

Text Color Supports: Field Connections

Sets the label text color and icon color.

Background Color Supports: Field Connections

Sets the background color of the label row.

Padding Supports: Responsive, Link Values

Sets the inner spacing of the label row.

Typography Supports: Responsive

The font settings for accordion labels.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Icon

The Icon section controls icon placement and icon states for accordion labels.

Icon Settings

Icon Position Default: Right

Places the icon on the left or right side of the label.

• Left: Places the icon before the label text.
• Right: Places the icon after the label text.

Icon Default: fas fa-plus; Supports: Field Connections

Sets the icon shown when an item is collapsed.

Active Icon Default: fas fa-minus; Supports: Field Connections

Sets the icon shown when an item is expanded.

DuoTone Icon Primary Color (DuoTone Icons Only) Supports: Field Connections

Sets the primary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style.

DuoTone Icon Secondary Color (DuoTone Icons Only) Supports: Field Connections

Sets the secondary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style.

Content

The Content section controls the appearance of accordion panels.

Content Settings

Text Color (Custom Content Only) Supports: Field Connections

Sets the text color for custom content shown inside accordion panels. This field appears when Content Source is set to Custom Content.

Background Color Supports: Field Connections

Sets the background color of the accordion content panel.

Padding Supports: Responsive, Link Values

Sets the inner spacing of the accordion content panel.

Typography (Custom Content Only) Supports: Responsive

The font settings for custom content shown inside accordion panels. This field appears when Content Source is set to Custom Content.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.