Hover Accordion (Divi)
An accordion for Divi 5 that opens as the pointer moves over it — a vertical list, or horizontal panels where the open one widens. It also opens on keyboard focus, on click or tap, and with the arrow keys. Each item is an Item child module. Move the mouse over the lists.
1. A vertical list
First item open · hover delay 120 ms · smooth easing, 500 ms · the other items dim to 45 % · Font Awesome icons, subtitles and side text · arrow expand icon at the end · each panel has text and a “Learn more” link.
2. Horizontal panels with photos
Horizontal panels, 480 px high (380 px on tablets): the open one grows to 3.5 × the others · a background photo in each panel with a dark overlay · overshoot easing, 700 ms · plus/minus icon · panels stack into a list on phones.
3. Content types and behaviour
Left: all closed at first · goes back to the default state when the pointer leaves · plus/minus at the start · an image-and-text panel, a text panel, and a panel that is a Divi Library layout (a row with a Text and a Button module). Right: the chosen item (the third) opens by default · a 400 ms hover delay · linear easing · no expand icon.
A Media Library photo beside the text; on phones it goes above.
Text with basic HTML, lists and links.
- Point one
- Point two
Any Divi modules can live in a panel
This panel is a Divi Library layout — a row with a Text module and a Button module — chosen in the Item’s Content Type.
4. Finished design
A dark menu: no gaps, square corners, borders between items, 28 px Georgia titles, a dark item background that turns indigo when expanded, titles grey → white on hover → amber when expanded, custom Font Awesome chevron icons in amber circles, 16 px body text in slate, amber links.