---
title: "Accordion Pro"
url: "https://divitorque.com/docs/accordion.md"
canonical: "https://divitorque.com/docs/accordion/"
published: "2026-07-08"
modified: "2026-07-08"
author: "Fahim Reza"
description: "Organize content into collapsible, expandable panels. Learn how to add and configure the Accordion Pro module in Divi — settings, options, and tips."
tags:
  - "Modules"
---

# Accordion Pro

The **Accordion Pro** module organizes content into collapsible, expandable panels — perfect for FAQs, feature breakdowns, and long-form content. It ships with seven style presets and deep control over how items open and animate.

## How to add the Accordion 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 global behavior and styling on the parent module.

## Content

### Main

- **Style Preset** — Boxed, Separated (Cards), Material, Connected, Minimal, Ghost, or Filled.
- **Open On** — Click, Hover, or Autoplay (with **Autoplay Speed**).
- **Open Only One at a Time** — closing others when one opens.
- **Initially Open** — First Item, None, or All Items.
- **Scroll Item to Top on Open** and **Scroll to Opened Item on Load**.
- **Show Close Button in Content** and **Show Toggle Icon**.

## Design

### Item & Header

- **Spacing Between Items**.
- **Header Background**, **Active Header Background**, and **Active Title Color**.

### Icon

- **Icon Source** (Built-in or Custom) and **Icon Type** (Chevron, Plus/Minus, Arrow).
- **Closed Icon** / **Open Icon**, **Icon Position** (Left/Right), **Size**, and **Color**.
- **Icon Background Shape** (None, Circle, Square, Rounded) and **Color**.

### Content

- **Content Height** — Auto or Fixed (with a scrollable **Fixed Content Height**).
- **Content Animation** — Fade, Slide, Zoom, Flip, Bounce, and more — with **Animation Speed**.

## Tip

For FAQ-style content, leave **Open Only One at a Time** on and set **Initially Open** to **First Item** so visitors immediately see an answer.