This tutorial introduces the Unfold widget of the JetTricks plugin included in the Crocoblock JetPlugins site. You will have the opportunity to hide part of a text or template and show the rest when the user clicks on a button.

This widget can help you save space and better organize the appearance of the page by hiding additional content. Unlike the Read more widget, you cannot hide one or more sections. However, the Unfold widget can be opened and then closed again. It also includes many customization options that can help you get the most out of it. For example, you can design it differently in folding and unfolding modes. By the way, if you want more information about the Read more widget, I will add it to Elementor Academy soon.

Another feature of this widget is that it can not only be used to show/hide text, but you can also use a template that you have previously created.

Let’s see how the Unfold widget works.

• 1. Add the Expand widget
• 2. Define the configuration
• 3. Choose the content
• 4. Customize the button
• 5. Make up to your liking

1. Add the Expand widget

Open in the Elementor builder the page or post to which you need to add an Unfold widget. Find the Unfold widget in the Elements panel and drag it to the section where you want to place it.

2. Define the configuration

In the left sidebar, you will see the Settings block. Here you can define the folding and unfolding settings.

• Fold: if you do not activate this option, the content block will be displayed open by default. Otherwise, it will be shown closed.
• Scroll to Top After Hiding Content (back to top after hiding content): if you activate this option the screen will scroll up when you hide the content of a block, this can be very useful when the content is long so that the user does not lose the reference point.
• Closed Height: this option allows you to define the height of the content block when it is closed. You can do this by moving the slider or by simply typing the required value in the bar;
• Separator height: defines the height of the colored separator stripe starting from the bottom of the unfolded block and going to the top. You can lighten the color with transparency in the Style tab. It is even possible to convert it into a gradient.
• Duration: here you can choose how fast the content block will be folded and unfolded. The higher the value, the slower the movement.
• Easing: here there are 9 types of folding and unfolding animation to choose from.

3. Choose the content

In the Content block, you can add static content (such as text, images, video or other media) or extract it dynamically from the meta field. In addition to that, you can add any of the available templates in the hidden content block.

To add the ready-made template to the hidden block, you should press the Template button in the Content Type row, which is the button with the leaf-shaped icon. Choose the template from the drop-down menu and it will be automatically added to the hidden content block.

4. Customize the button

You can customize the button that folds and displays the hidden content block in the Button section.

• Alignment: allows you to choose where the button will be placed.
• Fold Icon: you can choose the icon for the fold and unfold buttons from the icon library or load your own SVG file.
• Fold Text: type here the titles of the fold and unfold buttons.

5. Make up to your liking

There are many design settings for each element in the Style tab. Here are some examples of what you could create with the help of the Unfold widget:

So, these simple steps are all you have to do to get an awesome display block on your website page.