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.

Link to a Specific Item

Learn how to create a link that navigates to a specific accordion item.

Adding an ID

To begin, first assign an ID to the Accordion module, which can be accomplished by following the instructions below:

1. Open the Accordion module settings and click the Advanced tab.

2. Scroll to the ID setting, and set a unique ID name for the module.
   See the Advanced tab article for more information about ID selectors.

3. Save changes.

Index Values

Every item in the Accordion module is given a unique index value that starts at 0. The index value of the initial Accordion item is 0, the second item is assigned an index value of 1, the third item has an index value of 2, and so on. By using these index values in an HTML link, you can generate a link to a specific Accordion item and set it as the active item.

The below HTML code example demonstrates how the index values are allocated to each Accordion item. In this instance, the Accordion module has been given a unique ID name of my-accordion and consists of three Accordion items.

<div id="my-accordion" class="fl-module fl-module-accordion">
  <div class="fl-module-content fl-node-content">
    <div class="fl-accordion">
      <div id="my-accordion-0" class="fl-accordion-item"></div>
      <div id="my-accordion-1" class="fl-accordion-item"></div>
      <div id="my-accordion-2" class="fl-accordion-item"></div>
    </div>
  </div>
</div>

Link Structure

The link structure will differ based on whether the Accordion module is on the same page as your link. To create the link, you can use either the Button or HTML modules in your layout.

Same Page

When the link is on the same page as the Accordion module, you can use a hash character (#) followed by an ID name and the item's index value separated by a hyphen. For instance, using our example ID name of my-accordion, the link would be structured as follows:

Button module link option

#my-accordion-1

HTML module link

<a href="#my-accordion-1">My Accordion link</a>

Different Page

To create a link to the Accordion module from a different page on your website, use the complete URL of the target page along with the hash symbol (#) followed by the ID and index value. For instance, if you want to add the link to your homepage, and the Accordion module is located on a page named Sample Page, the link should appear like this:

Button module link option

https://my-website.com/sample-page#my-accordion-1

HTML module link

<a href="https://my-website.com/sample-page#my-accordion-1">My Accordion link</a>

CSS Customization

Use this section to learn how custom CSS can extend the Accordion module’s styling beyond the options available in the module settings. The examples below show different ways to customize the appearance of accordion items, labels, icons, and other elements.

tip

The examples below use the Accordion module's fl-module-accordion parent class, which, depending on where you add your CSS, will style all Accordion modules used on your website. However, if you wish to customize a specific Accordion module, you should add a custom class name to the module and replace fl-module-accordion with the new custom class name.

.my-custom-class .fl-accordion-item-active {
  background-color: #f4f4f4;
}

Active Accordion Item

The following CSS examples demonstrate how to modify the appearance of the active accordion item. Doing so can increase the visibility in comparison to the inactive items:

Background Color

.fl-module-accordion .fl-accordion-item-active {
  background-color: #f4f4f4;
}

Label Color

.fl-module-accordion .fl-accordion-item-active .fl-accordion-button-label {
  color: #ff0000;
}

Accordion Content Color

.fl-module-accordion .fl-accordion-item-active .fl-accordion-content {
  background-color: #f4f4f4;
  color: #000000;
}

Replace Expand/Collapse Icons with Images

You can use the CSS provided below to replace the icons of the collapsed and expanded states in the Accordion module with images of your choice.

.fl-module-accordion .fl-accordion-button {
  width: 100%;
  position: relative;
}

/* Hide Accordion Icons */
.fl-module-accordion .fl-accordion-button .fl-accordion-button-icon {
  display: none;
}

/* Collapsed Image */
.fl-module-accordion .fl-accordion-button-label:after {
  content: '';
  width: 30px;
  height: 30px;
  background-image: url(IMAGE URL);
  background-size: cover;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Expanded Image (Active Accordion) */
.fl-module-accordion .fl-accordion-item-active .fl-accordion-button-label:after {
  background-image: url(IMAGE URL);
}