Skip to content
StoreDocsSupport
Get Divi Torque

Modules

Accordion Pro

Organize content into collapsible panels for FAQs, feature breakdowns, and long-form content. Choose from seven style presets and control how items open and animate.

Accordion Pro organizes content into collapsible panels. Use it for FAQs, feature breakdowns, and long-form content. It includes seven style presets and settings for how items open and animate.

How to add the Accordion Pro module

  1. Add a section and row, then add the Accordion Pro module.
  2. Each panel is an Accordion Item child. Add one item per panel and enter its title and content.
  3. Set the shared behavior and styling on the parent module.

Content

Layout & Behavior

Open the Accordion Pro settings, go to the Content tab, and open the Layout & Behavior group.

  • Style Preset: Boxed (default), Separated (Cards), Material, Connected, Minimal, Ghost, or Filled.
  • Open On: Click (default), Hover, or Autoplay.
  • Autoplay Speed: How many milliseconds each item stays open before the next one opens. Range 1000 to 15000, default 4000. It applies when Open On is set to Autoplay.
  • Open Only One at a Time: Closes the other items when one opens. On by default.
  • Initially Open: First Item (default), None (all closed), or All Items.
  • Scroll Item to Top on Open: Off by default.
  • Scroll to Opened Item on Load: Off by default.
  • Show Close Button in Content: Off by default.
  • Show Toggle Icon: On by default.

Accordion Item settings

Open an Accordion Item and go to the Content tab.

  • Title, Subtitle, and Content: The header text, an optional smaller line under the title, and the text revealed when the item opens.
  • Open By Default: Shows this item expanded when the page loads.
  • Always Keep Open: Locks this item open so visitors cannot collapse it.
  • Disable This Item: Hides the item on the front end without deleting it.
  • Anchor ID: A unique ID for deep links. Visiting the page with #your-id in the URL opens and scrolls to that item.
  • Title Link URL: Makes the title a link. Clicking the rest of the header still toggles the item.
  • Header Media: None, Icon, or Image, shown beside the title. Choose a Header Icon or a Header Image, then adjust Image Size, the two Focal Point settings, and Flip Horizontal or Flip Vertical.

Design

Item Container

  • Spacing Between Items: Default 10px.

Title Bar & Active State

  • Header Background
  • Active Header Background
  • Active Title Color

Toggle Icon

  • Icon Source: Built-in (default) or Custom Icon. With Custom Icon, pick a Closed Icon and an Open Icon.
  • Icon Type: Chevron (default), Plus / Minus, or Arrow.
  • Icon Position: Right (default) or Left.
  • Icon Size and Icon Color.
  • Icon Background Shape: None (default), Circle, Square, or Rounded.
  • Icon Background Color

Content Typography

This group also holds the content height and animation settings.

  • Content Height: Auto (default) or Fixed. With Fixed, set Fixed Content Height to the maximum height before the content scrolls.
  • Content Animation: None (default), Fade, Slide Down, Slide Up, Slide Left, Slide Right, Zoom In, Zoom Out, Flip, or Bounce.
  • Animation Speed

The Title Typography and Subtitle Typography groups style the item header text.

Tip

For FAQ-style content, leave Open Only One at a Time on and set Initially Open to First Item. Visitors see an answer right away.