On a page, some sections need to be displayed in a more compact way to save space. For example, when you create an FAQ page, you can set each item to be collapsible. In the visitors’ perspective, this this sort of design implementation trick can offer a better experience (some people hate a long text content). In Elementor, there are at least three widgets that you can use to add collapsible content: Tabs, Accordion, and Toggle. While these widgets are useful to add collapsible content, the content types you can add are limited. You can only add text content. JetTabs offers some solutions if you want to add non-text collapsible content in Elementor.
Never heard about JetTabs before?
JetTabs is a premium Elementor add-ons developed by Crocoblock. It is designed specifically to allow you to add collapsible content. Instead of just text, you can add collapsible content in a wide range of formats. From image, video, or the combination of text, image, and video. Unlike the default Elementor widgets to create collapsible content (Tabs, Accordion, and Toggle) that only allow adding content from a WYSIWYG editor, JetTabs allows you to add the content from a template (Elementor template more precisely). In other words, you can add any visual element to your content using the available Elementor widgets.
JetTabs offers four widgets that you can use to add collapsible content to your page:
You can use this widget to display content in two different blocks. It is a great fit to be implemented on a pricing plan section where you can display the plans you offer by subscription period (e.g., monthly and yearly).
2. Image Accordion
So far (until version 3.2.x), Elementor has no widget to allow you to add accordion image. JetTabs allows you to accomplish it thanks to the Image Accordion widget. You can add supporting elements like button and text to the image accordion. If you use Elementor Pro, you will also be able to use a dynamic image on each image accordion item.
3. Classic Accordion
Elementor has a default widget called Accordion which you can use to add collapsible content in the form accordion. But again, you can only add text content as the widget doesn’t allow you to add the content from a template. The Classic Accordion widget of JetTabs offers two options to add the content to each accordion item: via a WYSIWYG editor and via template.
The ability to add accordion content from a template allows you to add more interesting content formats by adding visual elements like icon, image, or even video.
You can use the Tabs widget to add a tabbed section on an Elementor page. Again, the content types you can add are limited to text. There is no option to add image or other content types. JetTabs comes with a Tabs widget (the widget name is the same as the native Tabs widget of Elementor). You can use the widget to add a tabbed section as well. The difference is that you can add more content types as it allows you to add content from a template.
Since you can add the tab’s content from a template, you can use the Tabs widget of JetTabs to create, for instance, a tabbed section that displays blog posts from different categories (categories are displayed in tabs). Here is an example use of the widget.
How to Use JetTabs
The use of JetTabs is extremely straightforward. After installing and activating the add-on, you will find four new widgets on your Elementor. You can find them on the JETELEMENTS block on the settings panel (panel on the right side within the Elementor editor). Simply add the widget you want to to use by dragging it to the canvas area.
If you are new to Elementor, you can read our previous article to learn how to use Elementor.
Adding Content From a Template
As mentioned above, in addition to adding the content from a WYSIWYG editor, JetTabs also allows you to add the content from a template. All JetTabs widgets support content adding from a template except the Image Accordion widget. You can add whether a page template or section template.
To add the content from a template, first, you can create the template of the content you want to add first. In this post, we will show you to add the content from a template on the Switcher widget. We will add a section template in this example (you can also add a page template). Again, you can read our previous article if you are new to Elementor.
On the Elementor editor, specify a section you want to save as a template. Hover your mouse over the section handle, right-click and select Save as Template. Give your template a name and click the SAVE button.
Add the Switcher widget to the canvas area. Once added, go to the settings panel. On the Items block under the Content tab, set Content Type to Template and then select the template you have just created above from the Template dropdown menu.
You can follow the same steps to add the content from a template on the Classic Accordion and Tabs widget.
The Verdict: JetTabs Review
When implemented properly, collapsible content can offer a better experience for your visitors. This design trick allows you to display a long content into a more compact form, which can save some space. Elementor already has default widgets to allow you to add collapsible content. However, the content types you can add are limited to text. Crocoblock — via JetTabs — offers solutions that allow you to enrich your collapsible content by adding visual elements like icon, image, to video thanks to the ability to add the content from template. So, if you want to accomplish something like this, JetTabs can be a solution you can try.
JetTabs itself is released as a premium add-on. You can get is whether as a separate plugin (costs $15 per year) or in a set (along with other JetPlugins members).