Looking for a convenient way to showcase content on your site? Use JetTabs plugin to make the development process fast and easy.
Compact and usable websites are considered to require high user experience level. By placing content inside tabs, accordions, dropbars, we make the perception of the site easier and more comfortable. JetTabs plugin provides widgets which functionality allows to place any content built with Elementor inside of them. When using tabs, you provide a choice for the visitor – to unwrap tabs and view the content or go further.
Look through this tutorial in order to learn more about displaying content using Classic Accordion widget.
How to use Classic Accordion widget
Let’s open the page where you want to add the Classic Accordion widget for editing with Elementor editor. Once you’ve done so, feel free to follow the guide below to learn how to use it and fill it up with content.
Step 1 — Drag and drop the Classic Accordion widget from elements panel in Elementor. Also, you can insert a .json file from the dummy-data folder. In case, you have JetThemeCore plugin, you can add the accordion template from Magic Button library, located in Sections > Accordion block.
Step 2 — Now, in the editor click the first item and start adding content to it.
If you toggle to “yes” Active option, the content will be displayed permanently. Disable it if you want the user to click the item in order to unravel the content.
Step 3 — Select icons if needed and enter the label title. As you can see, there is a Dynamic option, so that you can pull the title of the label from the custom fields and meta boxes in case you’ve got any dynamic content added with JetEngine and available for the template where the Classic Accordion widget is added.
Step 4 — The next thing you should do is choose the content type. If you need to add simple text content, select Editor from the dropdown. But the coolest thing is that you can alternatively choose a template which you have created previously to be displayed, so you’re not actually limited with the content type. Any content from the template you’ve got will be displayed in the accordion block. Select Template option in the Content Type dropdown and select the needed template from the list (if you haven’t got any templates yet, make sure to create one, and only then select it).
Step 5 — Customize the other accordion block items, add as many as you need to have in your accordion.
Step 6 — Let’s switch to the Settings tab. Here you can enable Collapsible option which allows leaving the item unwrapped. Also, select the Show Effect to apply it when the content opens up or closes.
How to style up the accordion
As usual, in Elementor you can style each element of the section. You can adjust the colors of the accordion container, toggle, toggle fields and the content of the toggle.
Note, that you can adjust the style of the accordion itself as well as edit the templates which you’ve selected to be shown inside the accordion blocks. Just click Edit Template button shown on top of the template in the accordion block, and you’ll be redirected to the page of the particular template, where you can make changes.
Also, proceed to Advanced settings and customize margin, padding values, responsiveness, etc.
Hope this tutorial makes it clear and now you can go ahead with displaying content using Classic Accordion widget.