Unfold (Divi)
Fold long content to a height — in pixels, a percentage of the content or lines of text, per device — with a fade over the fold and a Read more / Show less button. The content is the module’s own rich text plus any Divi modules you drop inside. Without JavaScript it simply reads in full. Each example is labelled with the settings that make it.
1. Read more, the default way
Fold Height 140 px · fade to white · a text-link button with a chevron that nudges on hover · Show less folds it back and scrolls the box into view if needed.
How it works
Nothing is folded until the script runs, so search engines and visitors without JavaScript get the whole text.
Moving the keyboard focus into the folded part opens it, so nothing focusable is ever hidden.
2. Four button styles
The same product description with each button style, accent teal. Solid, outline and pill lift on hover; the text link nudges its icon.
Button Style: Text link
Button Style: Solid
Button Style: Outline
Button Style: Soft pill
3. Fold by pixels, percent or lines
Fold Height In: Pixels (90 px), Percent of the content (40%) and Lines of text (3 lines) — the last one stays accurate whatever the font size.
Fold Height In: Pixels · 90
Fold Height In: Percent · 40
Fold Height In: Lines · 3
4. Where the button sits
On the fade, centred (it moves below once open) · Above the content · Full width below, as a soft pill. The fold height is 160 px on desktop and 220 px on phones.
Button Position: On the fade · centred
Button Position: Above the content
Alignment: Full width · Soft pill
5. Triggers and behaviour
Unfold With: A click anywhere on the box · Hover (the button on touch screens) · Allow Folding Again off (the button disappears once open) · Unfolded on load · a soft-bounce easing.
Unfold With: A click on the box
Tap to read
Our heavyweight hoodie is cut from 480 gsm organic cotton, brushed inside for warmth and garment-dyed for a lived-in colour from the first wear.
The hood is double-layered with flat drawcords, the kangaroo pocket is bar-tacked at the corners, and the ribbed cuffs keep their shape wash after wash.
Wash cold, inside out, and dry flat. It will soften with every wash.
Unfold With: Hover · Soft bounce
Hover to read
Our heavyweight hoodie is cut from 480 gsm organic cotton, brushed inside for warmth and garment-dyed for a lived-in colour from the first wear.
The hood is double-layered with flat drawcords, the kangaroo pocket is bar-tacked at the corners, and the ribbed cuffs keep their shape wash after wash.
Wash cold, inside out, and dry flat. It will soften with every wash.
Allow Folding Again: off
On Load: Unfolded
6. Divi modules inside the fold
The module’s rich text followed by an Image, a Text and a Button module dropped inside it — all folded together at 200 px, unfolding to their full height.
The heavyweight hoodie
A closer look at the hoodie our customers keep for years.
What’s inside
- 480 gsm organic cotton
- Double-layer hood
- Bar-tacked pocket
- Garment-dyed colour
Anything can go inside
Add modules to the Unfold module from the layers panel or the + inside it: images, videos, tables, other Moduly modules. They fold with the text and get their full height back when opened.
7. On a dark background, styled from the Design tab
Fade To the card colour, a taller fade (140 px), a white serif title and light body text (Text group), and an outline button in amber from the Button group.
8. Short content is left alone
Skip When Content Is Short: when everything fits within the fold (here 200 px), the text shows in full and the button is not drawn.