Unfold
- YOOtheme Pro: 5.0.42 or newer
- Joomla: 5.4.8 or newer, with the Joomla plugin package
- WordPress: 7.0.4 or newer, with the WordPress plugin package
- PHP: 8.2 or newer
- Browser: A current version of Chrome, Firefox, Safari or another modern browser
JavaScript is required for the reveal interaction on the public page.
Unfold shows the beginning of a Builder sublayout at a selected height. If more content lies below that height, it adds a Show More control. A visitor can reveal the rest with one click.
It is useful for long descriptions, lists, galleries and other layouts that should take less space until the visitor chooses to read on. Unfold is a one-way reveal; it does not add a Collapse button afterward.
- Add Flart Studio → Unfold in YOOtheme Pro Builder.
- Place the elements you want to reveal inside its Content sublayout.
- Choose a starting Height under Settings → Unfold.
- Optionally describe the hidden content in the Summary tab and customize the reveal control under Settings → Link.
- Turn off Content → Edit mode before publishing.
Use ordinary YOOtheme Pro Builder elements inside Unfold, including text, images, buttons and complex layouts. Other Unfold elements may also be nested inside it.
Each Unfold instance keeps its own content and reveal control. Nested elements, including an Unfold inside a Switcher Pro item sublayout, are handled within their own scope.
Content → Edit mode shows the complete sublayout so you can work on it in Builder. It also displays a visible warning. Edit mode is enabled when you first add Unfold.
Turn it off when the layout is ready. If you leave it on, the full content and warning remain visible on the public page; the normal reveal interaction is not used.
An empty Unfold remains visible as a placeholder in Builder so you can find and fill it, whether Edit mode is on or off. On the public page, an empty Unfold is not rendered at all.
A row or column without a real child element still counts as an empty sublayout.
Under Settings → Unfold → Height, choose X-Small, Small, Medium, Large, X-Large or 2X-Large. Their default heights are 150, 250, 400, 600, 800 and 1000 px, respectively. X-Small is the initial choice.
These are style presets, not a maximum size for your content. The visitor can reveal the full sublayout when it exceeds the selected height.
Yes. The Unfold section of the YOOtheme Pro Builder Style Customizer lets you adjust the six height presets, the collapsed-edge fade and the height transition. The default fade is 60 px, and the default transition lasts 400 ms.
Changes to these style values apply to the corresponding Unfold elements. Visitors who prefer reduced motion get an immediate reveal instead of waiting for the transition.
Yes. Add a custom attribute under Advanced → Attributes on that Unfold element:
data-fs-unfold-animation-duration— transition duration in milliseconds; default 400, supported range 0–10,000.data-fs-unfold-fade-height— fade height in pixels; default 60, supported range 10–500.data-fs-unfold-overflow-tolerance— extra overflow needed before showing the control, in pixels; default 5, supported range 0–200.
Enter a plain number without ms or px. For example, set data-fs-unfold-animation-duration to 600 for a 600 ms transition. Invalid values fall back to the style or runtime default.
It appears only when the full content is taller than the selected starting height, allowing for a small overflow tolerance. If everything fits, Unfold displays the content in full and hides the control.
The element measures again when content or styles change. A control that was initially hidden can appear automatically if the sublayout later grows beyond the limit.
Under Settings → Link, change its text, icon, icon alignment, title, button or link style, size, width and top margin. The default text is Show More with a chevron icon on the right.
Text and icon can use Dynamic Content. If both are absent, Unfold supplies a Show More text fallback. For an icon-only control, you can enter an ARIA Label; otherwise it falls back to Show More for accessibility.
The Summary tab contains an optional short description of the content hidden by the collapsed state. Screen readers announce it with the Show More control, while visitors do not see it on the page.
Write a brief plain-text sentence. Dynamic Content is supported, but HTML tags are removed and the remaining text is escaped. The summary is outside the inert content, so it can describe the collapsed section without exposing its links to keyboard navigation.
While content is collapsed and overflowing, Unfold marks the sublayout inert and aria-hidden="true". This prevents keyboard users from tabbing through links and controls that have not been revealed. The Show More control has an accessible name and points to the content with aria-controls.
When activated, Unfold removes the inert state, updates aria-expanded, focuses the content region without scrolling the page, and lets the next Tab move into the revealed content. If the content fits without a reveal control, it remains accessible normally.
Yes. The Screen Reader Summary, Static ID and several reveal-link fields, including text and icon, can use YOOtheme Pro Dynamic Content. The elements inside the Content sublayout can use their own Dynamic Content settings as usual.
Click Action is intentionally static: it does not accept a Dynamic Content mapping because it runs JavaScript.
Settings → Unfold → Static ID gives the inner Unfold container a page anchor. For example, enter products to use #products in a direct link or custom trigger. Leave the field empty to generate an ID automatically.
Use a different Static ID for every Unfold instance on the same page. Unfold preserves a valid authored ID, so duplicate values are not silently renamed. A numeric ID is normalized to avoid colliding with an automatically generated one.
No. Static ID identifies the inner container that the Show More control targets. YOOtheme Pro’s native Advanced → ID identifies the outer Builder element.
Use Static ID for an Unfold anchor or custom trigger. Use the Advanced ID for ordinary Builder styling or scripts that target the outer element.
Yes. Settings → Link → Click Action runs custom JavaScript when the control is clicked. Use it only for code written by a trusted Builder author; the field is not available for Dynamic Content.
Returning false or preventing the click event stops the reveal. A site Content Security Policy that blocks inline event handlers may block Click Action, while the separate Unfold reveal script can still open the content.
Yes. Unfold emits fs-unfold:expand immediately before opening and fs-unfold:expanded afterward. Both events bubble from the Unfold root.
The first event is cancelable. Call preventDefault() on it if your script needs to stop that expansion. The second event reports that the reveal completed.
Yes. A page can contain multiple Unfold elements, including nested ones. The runtime initializes elements already on the page and newly inserted ones, keeps each control scoped to its own content, and cleans up removed or replaced instances.
Builder preview updates also trigger a refresh. Each instance is measured independently, so one changing sublayout does not require manually reinitializing every Unfold on the page.
Yes. Unfold uses YOOtheme Pro’s native General and Advanced settings for layout, spacing, alignment, visibility, animation, custom classes, attributes and CSS. The HTML Element choice controls the inner semantic wrapper.
The element’s custom CSS editor provides selectors for the root, sublayout and reveal link. Use the Style Customizer when you want to change Unfold’s shared height, fade or transition values.
Print styles show the full content and hide the Show More control. The printed page therefore does not depend on a visitor clicking the reveal link first.
Yes. Unfold includes translations for its own Builder fields, options and descriptions in 28 languages. YOOtheme Pro supplies the translations for its native General and Advanced settings. If a product translation is unavailable, the original English text is used.
Version 2.0.2 shortens the Summary tab name in several languages and fixes the Slovenian catalog filename so YOOtheme can select sl_SI.
First confirm that the Content sublayout has a real element, Edit mode is off, and the rendered content actually exceeds the selected Height. If it fits, hiding Show More is expected.
After an update, save or reload the Builder preview and clear any CMS, YOOtheme, browser or CDN cache that serves old JavaScript or styles. If the issue remains, check the browser console for a missing script or another page error, and verify the minimum plugin and YOOtheme versions.