The Divi Theme includes the Divi Accordion Module, a flexible content element that lets you organise information into expandable and collapsible sections. It is commonly used for FAQs, product details, service information, instructions, and other content where displaying everything at once would make a page unnecessarily long or difficult to scan. Each accordion item can contain text and other content, while its settings allow you to control aspects such as open and closed states, styling, spacing, typography, and icons to suit the design of the page.
Our Divi Accordion Module tutorials cover practical ways to customize the module's appearance, behavior, navigation, and use in FAQ and other content layouts.
Appearance and styling: Learn how to add subtitles, add icons to accordion titles, and reduce gaps below nested bullet lists for greater control over how accordion content is presented.
Opening and closing behavior: Guides show how to open all items by default, keep all items closed by default, make items closeable, and open or close all items with a button.
Navigation and linking: Learn how to set custom CSS IDs for individual items, link directly to a particular accordion item, and scroll to the top when an item opens.
FAQs and advanced uses: See how to create an FAQ accordion, add FAQ schema, nest one accordion inside another, and fix PDF resizing issues in closed accordions.
Title icons can make a Divi Accordion module easier to scan, especially for FAQs, service lists, and feature sections. In this guide, you'll learn how to add icons to accordion titles, style them differently for open and closed states, and give a specific accordion...
By default, Divi's Accordion module only lets you display a title and content for each item. If you'd like to add a subtitle beneath each accordion title, this guide shows you exactly how. You'll learn how to add subtitles, style them across the whole module, and...
By default, the Divi Accordion module opens only the first accordion item when the page loads. If you're using an accordion for product details, onboarding steps, documentation, pricing comparisons, or any content where visitors should see everything immediately, you...
Divi’s Accordion module does not include a built-in option for adding FAQPage schema. In this guide, I’ll show you how to add the required JSON-LD markup using a simple, no-code plugin option. The feature is available either as the standalone Divi Accordion FAQ Schema...
Assigning unique CSS IDs to specific items in the Divi Accordion module allows for precise control over styling, targeting, and linking within your page content. This ability is particularly useful when you want to apply custom designs or create anchor links to...
Building an organized and interactive FAQs section on your website can enhance user experience by providing quick answers to common questions in a visually appealing, space-saving format. Displaying FAQs in a Divi accordion module allows visitors to easily browse...
Enhancing user experience on your website often involves ensuring seamless navigation and readability. For Divi users, one such improvement is making accordion tabs scroll to the top of the page when clicked. This ensures that the content is immediately visible to the...
By default, Divi displays superscripts in modules such as the text module at the same font size as the surrounding text. To improve readability and maintain typographical hierarchy, it’s often preferable to have superscripts appear smaller than the rest of the text...
The Divi theme comes with an accordion module, which can be used to display text in expandable boxes. When using a bullet list with a sub-list in the accordion content, you might notice that there is a reasonably large gap after the sub-list. Here's how that gap can...
The Divi theme comes with an Accordion module which lets you present FAQs and other content in expandable boxes (or "toggles"). Open accordion toggles display a close icon on the right hand-side of the title. But there isn't currently an option to display an...
