A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

The Easiest Way to Create Toggles and Accordions in WordPress

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 free plugin is currently the largest collection of free widgets you can find and comes with 60 free widgets to help you add more functionality to your website. And, what’s also very important is that it is compatible with all WordPress themes.

Adding Accordions and Toggle 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.

Accordions example

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.

Accordions Behavior

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
Accordions Style

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.

Two colomn row

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.

Accordions Widget

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.

Accordions

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.

Behavior and 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.

Item details

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.

Content height

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.

Accordions icons

Now we can move to the Style settings. Here is where you do the fine tuning of the accordion and toggle widget style.

Accordions Style settings

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.

Qi Accordions typography

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.

Active settings

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!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Comments (1)

  • nathalie

    The blog is so interesting to read ! Thanks for sharing valuable information !

    reply

Leave a Reply