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.
If you need to embed one Divi module inside another, there are several free plugins out there that may help, such as Simple Divi Shortcodes, Shortcodes for Divi, or Divi Library Shortcodes. They all work in more or less the same way - you save your inner module to the...
Divi's Accordion module lets visitors open individual toggles, but it doesn't include a built-in way to open or close all of them at once. In this tutorial, I'll show you how to add an Open All / Close All button that lets visitors expand or collapse the entire...
The default behavior of the Divi accordion module is to start with one toggle open and the rest closed. Then clicking on a closed toggle opens it and closes the originally open one. One thing you might notice is that, despite clicking on the open toggle having no...
The PDF Embedder plugin allows you to easily embed PDFs in your web pages. When the browser window is resized, PDF Embedder resizes PDFs to fit the new space available to them. However, in the Divi Theme, when a PDF is hidden inside a closed accordion module toggle,...
The Divi accordion module starts with the first accordion item open by default. If you'd like to be able to control which accordion item is opened when linking to the page, you can do so with the following jQuery code:Related Post: Adding JavaScript / jQuery to Divi....
By default, Divi Accordion modules keep one toggle open. That means visitors can open another item, but they cannot simply close the currently open item and leave the whole accordion collapsed. In this guide - updated for Divi 5 - I’ll show you how to make Divi...
By default, the Divi Accordion module opens the first accordion item when the page loads. If you want a cleaner FAQ, pricing, product details, or documentation layout, you may prefer all accordion items to start closed instead.Quick answer: To make a Divi Accordion...
