The Easiest Way to Create Toggles and Accordions in WordPress
Accordions and Toggles are handy elements that add more functionality to your page, allow you to structure content better, and help with the overall website organization. Adding them is not especially complicated but can be especially easy with the right tool.
That’s why we opted for the user-friendly Qi Addons for Elementor that includes a wide variety of customization options and is incredibly easy to use. This plugin is currently the largest collection of 60 free widgets you can use to add more functionality to your website. Also, there is an amazing collection of 40+ premium Qi widgets. And, what’s also very important is that it is compatible with all WordPress themes.
Adding Accordions and Toggle Free Widget with Qi Addons for Elementor
The Qi Addons allows you to completely customize the accordions and toggles style to the WordPress theme you are using, from fonts to colors and borders and everything in between.
To get inspired we recommend checking out the widgets page. We will show you how we applied it.
The basic perception of how Elementor works is all you need to understand in this section. This is actually a row containing two columns with an image in the left column and accordions in the right one. Of course, an accordion can take up the whole row or any part of the row, as per your need.
Before we continue, let’s check up on some basic style characteristics that this addon comes with. So let’s start from Behaviour. Two types of behavior are possible – Accordions where only one item can be open at one point in time and Toggles that allows more than one item to be open at the same moment.
The style can further be defined with borders and several options are available:
- Standard – no borders
- Boxed – with borders,
- Border top – only has border on top above the headline
- Border Between- only has the border between headline and description
How to Add Accoridons and Toggles With Qi Addons
To start, we will set the row to be split in two columns and add an image to the left column, just to make the section more visually appealing.
After the image is added, we’ll find the Accordions and Toggles widget by typing in the search bar or by scrolling down the menu. When the widget is found, simply click on it, hold it and move to where you want to place the new element.
We added the Accordions and Toggles widget to the right side of the row, and you can see all the settings related to it on the left. The default widget settings are set in such a way that the text and style automatically match the theme you are using, so in case you see no need to change it, you can simply finish the process here, the widget will look as it naturally belonged to the theme.
The next thing you need to set is Behaviour and Style. We’ve already mentioned the Behaviour and Style options so you can set here whatever works for you. For the purpose of this article we selected Accordions option from the Behavior menu and Standard style.
What is needed to be done now, is to add items. Scroll down to find the Item options. You will notice two small icons in the top right corner of the Items tab. The first one is for copying an existing item and the little X next it is for removing an item. Below the Item tab is the Add New button that serves for adding new items. When you click to enter a new item, you need to set a headline first, and then type in the text in the designated field below. You will notice plenty of options similar to the ones offered in various text editors to style and format the text. We recommend you arrange the text and headline at this point as you will immediately have a preview of how it will look like in the end.
After you enter the text, you can set the Content Height. This option refers to the size of the toggle field. If you set it to Tallest Item Height then each item will be the same size as the biggest one. If you select the Individual Item Height option then the size of each item will correspond to the size of the content in it.
If you want to change the default icons that show upon opening and closing the item, simply click on the Open Icon or Close Icon field and two new options will be displayed. One is for adding new icons from the Icon Library, and the other one is for adding a SVG.
Now we can move to the Style settings. Here is where you do the fine tuning of the accordion and toggle widget style.
You can choose the title style and set the Title Typography. As we mentioned, the default options are set in such a way that the style of the widget matches the theme you are using. But you can always try out all the other options simply by selecting them and the changes will be immediately visible in the widget on the right side of the screen. Explore the options and see what works best for you.
The next settings refer to the changes of style that happen to an item when it is closed or opened. You can, for example set the text to be in different color when it is opened, or the background can be in a different color. There’s also the option to set different padding when the item is active i.e opened.
If you prefer video tutorials take a look at this one created by Qi’s authors:
In Conclusion
As you feel more familiar with the plugin, you will explore even more refined options for fine tuning the style of your Accordion and Toggles widget. This intuitive tool is perfect for beginners as it is incredibly easy to use, while advanced users will also enjoy using it as it offers such a plenitude of customization options.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
nathalie
The blog is so interesting to read ! Thanks for sharing valuable information !