This tutorial features the Unfold widget from the JetTricks plugin. You will have an opportunity to hide the content and style it according to the design of your page.
The Unfold widget for Elementor from the JetTricks plugin is a space-saving tool that helps organize page appearance and hide extra content. Unlike the Read More widget, it cannot hide one or multiple sections. However, the Unfold widget can be opened and then closed again. It also offers many customization options to maximize its usefulness. For instance, one can style it differently in both folded and unfolded states.
So, let’s examine how the Unfold widget operates.
Add the Unfold Widget
The Page or Post where the Unfold widget is to be placed must be accessed, and the “Edit with Elementor” button clicked to open the page in the editor. The Unfold widget can be found in the Add element panel and dragged to the desired location.
Define Settings
The Settings block is displayed on the left sidebar, where the folding and unfolding settings are to be configured.
- Fold — a toggle that disables content block folding; when enabled, the content block remains permanently expanded (deactivated by default);
- Scroll to Top After Hiding Content — a toggle that automatically scrolls the content block to the top after it has been folded (deactivated by default);
- Scroll to Top Offset (px) — a slider that sets the pixel offset from the top when auto-scrolling occurs;
- Fold After a Specified Amount of Time — a toggle that enables automatic folding of the content block after a specified period of inactivity (deactivated by default);
- Autohide time (seconds) — a slider that sets the duration before the content automatically folds;
- Fold Content on Click Outside Widget — a toggle that allows folding the content block by clicking anywhere outside the widget area (deactivated by default);
- Height Type — controls how much content is shown when the widget is in the collapsed (closed) state.
- Fixed Height — displays only a specific height of the content when collapsed. When chosen, it activates the Closed Height slider, which allows defining the height of the content block when it is in the folded state; height can be adjusted in “px”, “%”, “vh,” “em,” “rem,” and via manual input;
- Word Count — limits the collapsed view by a specific number of words rather than by pixel height.
- Separator Type — a feature that allows selecting the visual style of the separator between folded and hidden content: “DIV” creates a solid divider, while “Gradient Mask” creates a smooth fade effect. When “Gradient Mask” is selected, the Separator Z-Index option is hidden;
- Separator Height — a feature that defines the height of the visual separator that appears at the bottom of the visible content when folded, can be adjusted in “px”, “%”, “vh,” “em,” “rem,” and via manual input. The separator’s color and styling can be customized in the Style tab;
- Separator Z-Index — a feature that controls the layering position of the separator relative to other page elements;
- State Styles — a section where one can alter additional settings of the Unfold and Fold states:
- Duration — a slider that sets the speed of the folding and unfolding animation; higher values create slower, more gradual transitions;
- Easing — a feature that selects the animation curve for folding transitions from available options: “Linear,” “Sine,” “Expo,” “Circ,” “Back,” “InOutSine,” “InOutExpo,” and “InOutCirc”.
Choose the Content
In the Content block, static content such as text, images, video, or other media can be added, or content can be dynamically pulled from the meta field. Additionally, any of the available templates can be inserted into the hidden content block.
To add the pre-made template to the hidden block, the “Template” button in the Content Type row (the button with the sheet-shaped icon) should be clicked. A selected template from the drop-down menu will be automatically inserted into the hidden content block.
To add content dynamically, the “Dynamic Tags” button in the top right corner above the text area should be clicked. A drop-down menu will appear, allowing data to be selected from any source.
Things to know
If the “Hide if empty” option is enabled in the Listing item settings, the Unfold content block containing dynamic data will also be hidden if it is empty. For more details, the Listing tutorial. can be consulted.
Customize the Button
The button that toggles the hidden content block can be customized in the Button settings section.
- Alignment — a feature that controls the horizontal positioning of the button within its container;
- Icon Position — a feature that determines where the icon appears relative to the button text: “Start” (left), “End” (right), “Top” (above text), or “Bottom” (below text);
- Fold / Unfold — separate configuration for fold and unfold button appearances:
- Fold Icon — a selector that allows selection of different icons for the fold and unfold states from the icon library, or upload custom SVG files for each state;
- Fold Text — a feature that allows setting the text labels displayed on the button for each state (e.g., “Show More” for unfold, “Show Less” for fold).
Do the Styling
A variety of design settings are available for each element in the Style tab. Customization can be made according to the design of the page or post.
Once all settings have been completed, click the “Publish” button.
So, these steps are all that are needed to add an Unfold widget to a WordPress website page with the JetTricks plugin installed.
