Advanced Accordion (Divi)

An accordion for Divi 5 that goes well beyond the built-in Accordion and Toggle modules: one-at-a-time or independent toggles, five designs, seven open/close icons on either side, icons, images, numbers, subtitles and badges, FAQ structured data, a search box that highlights matches, expand / collapse all, deep links, hover opening and the browser’s find-in-page reaching closed answers. Each item is an Advanced Accordion Item child module whose content can be text, a shortcode or a Divi Library layout.

1. FAQ with schema and search

Separate cards · FAQ schema (FAQPage JSON-LD in the page source) · a search box that filters and highlights · numbered Q1, Q2 · deep links: #returns opens the returns answer · the address bar follows the open question.

2. Toggles that open independently

Toggles mode: each item opens on its own, like Divi’s Toggle module · two items marked “Open on Load” · Expand all / Collapse all · connected box · chevron icon · Font Awesome icons, subtitles and a badge.

3. Filled bars, opening on hover

Filled title bars · opens as the mouse passes over (click on touch) · product images with subtitles · the open/close caret on the start side · fade-and-rise entrance.

4. Minimal lines, rich content

Minimal lines · arrow icon · the items hold text with a list, a Divi Library layout (a Text and a Button module) and a WordPress gallery shortcode · zoom entrance · the opened item scrolls into view.

5. Finished design

Accent edge on a dark page · custom Font Awesome open/close icons in a round box · custom colours for every state (slate → white on hover → amber when open) · amber numbers and badges · Georgia titles · light answer text.