{"id":26857,"date":"2021-07-14T15:00:22","date_gmt":"2021-07-14T13:00:22","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=26857"},"modified":"2021-08-03T12:40:45","modified_gmt":"2021-08-03T10:40:45","slug":"how-to-create-accordions-and-toggles-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-accordions-and-toggles-in-wordpress\/","title":{"rendered":"How to Create Accordions and Toggles in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]When designing a WordPress site, there are many different things you can do to make it appear more professional and user-friendly to your visitors. And thanks to many available <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">WordPress themes<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noopener\">plugins<\/a> that come with the ability to extend WordPress in all sorts of ways, your options are pretty much limitless. One such option is adding an accordion to your WordPress pages or posts. No matter if you plan to create a <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-faq-for-wordpress\/\">FAQ section<\/a>, a <a href=\"https:\/\/qodeinteractive.com\/magazine\/what-is-landing-page\/\">landing page<\/a>, or simply want to give a more organized and uncluttered look to your site, this useful element is just what you need.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This time around, we\u2019ve decided to <strong>help you learn to create and add accordions and toggles in WordPress<\/strong>. This is quite easy if you use the help of the right plugin. We will show you how to do this <strong>using the Accordions and Toggles widget from the Qi Addons for Elementor plugin<\/strong>. But first, we will talk a bit about what accordions and toggles are and also explain the main difference between the two.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So buckle in and read on:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-accordions-and-toggles-in-wordpress\">What Are Accordions and Toggles in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#difference-between-an-accordion-and-a-toggle\">What Is the Difference Between an Accordion and a Toggle<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-to-use-accordions-and-toggles\">When to Use Accordions and Toggles<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-accordions-and-toggles-using-the-qi-addons-for-elementor-plugin\">Adding Accordions and Toggles Using the Qi Addons for Elementor Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-accordions-and-toggles-in-wordpress\"><\/a>What Are Accordions and Toggles in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]In a nutshell, accordions and toggles are design elements used to organize various segments (or pieces of content) into one compact unit. This usually means <strong>building different sections separated with tabs that can be easily expanded<\/strong>. This makes them especially handy since they allow you to add plenty of content into these sections while saving space on the page.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Say that you want to create a FAQ page (a page that will contain answers to the questions your visitors or potential customers most often ask), for example. By using accordions and toggles, you will be able to organize questions and answers in a way that will show questions and uncover answers in an extendable tab. But regardless of what you need to use accordions and toggles for, it is a rather user-friendly strategy that will help <strong>save plenty of space on your page and make your content appear more organized<\/strong> as a whole.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"difference-between-an-accordion-and-a-toggle\"><\/a>What Is the Difference Between an Accordion and a Toggle<\/h2>\n<p>[\/vc_column_text][vc_column_text]Despite looking similar, accordions and toggles do have some differences. Specifically, when a section of an accordion is clicked, it expands, showing its hidden contents. When <strong>another section is clicked, the previous one closes automatically as the other expands.<\/strong> So, in an accordion, you can only have one section open at a time.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the other hand, <strong>a toggle allows you to keep the previous section opened, even when another one is expanded.<\/strong> Of course, you can close each section manually, if you want to.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is the core difference between a toggle and an accordion \u2013 they both have the same function (tucking away extra content and helping you organize it in a way that saves space and looks user-friendly) but <strong>they have different behavior when used on a page.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In short, accordions allow you to open one section only, while toggles allow multiple sections to be open at once.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-to-use-accordions-and-toggles\"><\/a>When to Use Accordions and Toggles<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we\u2019ve already established, accordions and toggles are great for saving space and organizing your content. Therefore, you can use them whenever you want to <strong>provide plenty of info on a page while keeping it tidy and organized for your visitors at the same time.<\/strong> For example, when you want to organize different bits of information about a product or service on your landing page or online store, or when you wish to create an above-mentioned FAQ page\u2013 be it for your business or even your <a href=\"https:\/\/qodeinteractive.com\/magazine\/portfolio-website-elements\/\">online portfolio<\/a>. You can even use them if you have to write any piece of content that has a complex set of instructions. In that case, you can use accordions and\/or toggles to group different steps into different sections and thus make each step easier to digest by readers.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In general, there are no limits to when you should use accordions and toggles in WordPress. You just have to decide whether it\u2019s something that\u2019s going to be useful for you and whether it will fit with your overall site design.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]No matter if you prefer to use accordion instead of a toggle or the other way around, by using our <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor plugin<\/a> and its Accordions and Toggles widget, you will have access to both of these options. <strong>Stay tuned as we guide you through the process of adding accordions and toggles in WordPress.<\/strong> We will also show you some different design styles you can make with this useful widget while we\u2019re at it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In case you prefer to watch videos instead of reading, we\u2019ve also got the video tutorial on the same subject, so make sure to check it out:[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/WDgy5sFM0vc\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-accordions-and-toggles-using-the-qi-addons-for-elementor-plugin\"><\/a>Adding Accordions and Toggles Using the Qi Addons for Elementor Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Coming with 60 different widgets, <strong>Qi Addons for Elementor is a great plugin that allows complete customization of your WordPress site<\/strong>. You can build beautiful sections that completely correspond with your website design in mere minutes, using no coding whatsoever. There are various types of addons you can use that all come with their own set of highly flexible features \u2013 from creative and business-oriented addons to infographics and typography elements. In short, if you use Qi Addons for Elementor, your customization choices are pretty much limitless \u2013 no matter what type of website you want to use them for.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"493\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Qi Addons For Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor-768x391.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor-620x315.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One great widget that also comes packed with this plugin is a so-called <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/accordions-and-toggles\/\">Accordions and Toggles widget<\/a>. Just like all other widgets in this collection, it comes with a set of fully flexible options that will allow you to create, customize and style your accordions and toggles in any way you like. You will get to <strong>set custom icons for opening and closing accordions and toggles, change fonts, use and combine different colors for your text, background, and icons<\/strong>, and plenty more.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"490\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-620x314.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, we will go through the widget settings in more detail and show you how you can change and combine different options to get accordions and toggles in various styles.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, before we begin our tutorial, just a quick, albeit obvious note \u2013 Qi Addons for Elementor is a plugin developed for the Elementor page builder. So, you have to install the <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor page builder<\/a> first in order to use our Qi plugin and its widgets. And in case you need more information on how to use this incredibly user-friendly and feature-rich builder, you can always check out our <a href=\"https:\/\/qodeinteractive.com\/magazine\/elementor-tutorial-for-beginners\/\">Elementor tutorial<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding and Customizing the Accordions and Toggles Widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]First things first, <strong>head to the backend of your page or post and search for accordions and toggles in the Elementor sidebar<\/strong>. Our widget will come right up.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Accordions-and-Toggles-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Add Accordions and Toggles Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Accordions-and-Toggles-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Accordions-and-Toggles-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Accordions-and-Toggles-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Accordions-and-Toggles-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, simply drag it over to the right. At this point we will be doing most of the customizing in the Content tab of the widget, before we proceed to the Style tab.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing you will notice here is that, by default, the widget has two items with some default Lorem Ipsum text.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"634\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Default-Look.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Default Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Default-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Default-Look-300x196.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Default-Look-768x502.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Default-Look-620x406.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will also notice that when you click on one item, the other item will close \u2013 this is the <strong><em>Accordion<\/em> type of behavior<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"511\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Behavior-Accordion.jpg\" class=\"attachment-full size-full\" alt=\"Behavior Accordion\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Behavior-Accordion.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Behavior-Accordion-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Behavior-Accordion-768x405.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Behavior-Accordion-620x327.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This behavior can be <strong>easily changed to <em>Toggle<\/em> using the <em>Behavior<\/em> option in the <em>General<\/em> section (<em>Content<\/em> tab).<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"519\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Switch-Behavior-Toggle.jpg\" class=\"attachment-full size-full\" alt=\"Switch Behavior Toggle\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Switch-Behavior-Toggle.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Switch-Behavior-Toggle-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Switch-Behavior-Toggle-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Switch-Behavior-Toggle-620x332.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you do that, you will notice that both items will remain open once you click on them. In short, the Toggle behavior allows you to keep all your items open at the same time.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Aside from this core change, all the other settings for both Accordion and Toggle behavior are the same.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that we\u2019ve demonstrated what the Toggle does, we will switch back to the Accordion behavior and go through all the other options, but you can, of course, use whichever behavior type you prefer.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Moving on to the <strong><em>Style<\/em> option<\/strong> located underneath \u2013 by default, it\u2019s set to <em>Standard<\/em>, but you can change it to <em>Boxed<\/em> (with each item having an underline), <em>Border Top<\/em> (a border will be placed above each item), and <em>Border Between<\/em> (a border is placed between the item titles). For our example, we\u2019ve set this option to <em>Border Top<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"516\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Style-Border-Top.jpg\" class=\"attachment-full size-full\" alt=\"Accordion Style Border Top\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Style-Border-Top.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Style-Border-Top-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Style-Border-Top-768x409.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Style-Border-Top-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next are the <em>Open Icon<\/em> and <em>Close Icon<\/em> options. Here you will be able to choose your open and close icons from the icon library or upload an SVG (like we did).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"506\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Open-and-Close-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Accordion Open and Close Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Open-and-Close-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Open-and-Close-Icon-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Open-and-Close-Icon-768x401.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordion-Open-and-Close-Icon-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Upload-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Upload Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Upload-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Upload-Icon-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Upload-Icon-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Upload-Icon-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Hit the <em>Insert Media<\/em> button once you\u2019re done with selecting your open and close icons.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"422\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Open-and-Close-Icons-Added.jpg\" class=\"attachment-full size-full\" alt=\"Open and Close Icons Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Open-and-Close-Icons-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Open-and-Close-Icons-Added-300x131.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Open-and-Close-Icons-Added-768x334.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Open-and-Close-Icons-Added-620x270.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now your <strong>open and close icons will automatically switch when you\u2019re opening and closing items<\/strong> (just like they should).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the <em>Items<\/em> settings, you will notice there are two items by default. You can easily add additional ones by clicking on <em>Add Item<\/em>. We\u2019ve added one additional item so our accordion now consists of three items.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"576\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items-768x457.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items-620x369.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"637\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Additional-Item.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Additional Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Additional-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Additional-Item-300x197.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Additional-Item-768x505.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Additional-Item-620x408.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To replace the content in your items, click on the <em>Item<\/em> you wish to change and simply insert your title in the <em>Title<\/em> field. You will also be able to use the <em>Content<\/em> field to change the look of your text in more detail. In addition, you can pick between <em>Visual<\/em> and <em>Text<\/em> mode (the latter is great for anyone who wants to add any code or CSS to style the text).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Item-Content.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Item Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Item-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Item-Content-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Item-Content-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Item-Content-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"511\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items-Content-Added.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Items Content Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items-Content-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items-Content-Added-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items-Content-Added-768x405.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Items-Content-Added-620x327.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For our example, we have turned our accordion into an FAQ section. We\u2019ve changed the text for our titles as well as for the rest of the items (using the <em>Content<\/em> field) to match the titles. You will, of course, add your own content both for the titles and for the items text.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now, in the <em>Style<\/em> tab, you will see plenty of options that will allow you to style your accordions in any way you like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"796\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Tab-300x246.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Tab-768x631.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Tab-620x509.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first option on the list will allow you to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-header-tags-for-seo\/\">set your title tag<\/a>. It is set to H3 by default, but you can pick anything from H1 to H6 (we\u2019ve changed ours to H5).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"535\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Tag.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Title Tag\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Tag.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Tag-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Tag-768x424.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Tag-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Clicking on the <em>Typography<\/em> section opens a new list of options that will help you set the typography of your accordions in full detail.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Family<\/em> option allows you to change the font family of your text \u2013 you can either enter its name manually or search for the desired font from the list in the dropdown (ours is set as default).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"523\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Font-Family.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Typography Font Family\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Font-Family.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Font-Family-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Font-Family-768x415.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Font-Family-620x335.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Size<\/em> option helps you adjust the font size. We\u2019ve set ours to 21px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"517\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Size.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Typography Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Size-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Size-768x410.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Size-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, there\u2019s the <em>Weight<\/em> option. You can set it to <em>Bold<\/em> or simply use one of the numerical values (we\u2019ve left our weight on <em>Default<\/em>).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"516\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Weight.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Typography Weight\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Weight.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Weight-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Weight-768x409.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Weight-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With the text <em>Transform<\/em> option, you will be able to make the title Uppercase, Lowercase, Capitalized, or Normal (that\u2019s our default). As for the <em>Style<\/em>, you can make it appear Normal, turn it Italic, or Oblique.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Transform-and-Style.jpg\" class=\"attachment-full size-full\" alt=\"Transform and Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Transform-and-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Transform-and-Style-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Transform-and-Style-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Transform-and-Style-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There\u2019s also the <em>Decoration<\/em> option that lets you set an Underline, Overline, Line Through, or use none of those (which is also our default setting).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"517\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Decoration.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Typography Decoration\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Decoration.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Decoration-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Decoration-768x410.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-Decoration-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Line-Height<\/em> option helps create more space around the title. The default value for this setting is in ems, but if you want, you can easily switch it to pixels.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Last but not least, the <em>Letter Spacing<\/em> option gives you more space between the letters.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"522\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-LH-LS.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Typography LH LS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-LH-LS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-LH-LS-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-LH-LS-768x414.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Typography-LH-LS-620x334.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s it for the options related to typography.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Afterward, you will find settings that will let you choose between <em>Normal<\/em> and <em>Active<\/em> mode. <strong>The Active mode allows you to style the look of the accordion item when it\u2019s opened,<\/strong> while <strong>Normal lets you style the look of other accordion items that aren\u2019t active.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"536\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hovers.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Hovers\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hovers.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hovers-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hovers-768x425.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hovers-620x343.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In <em>Normal<\/em> settings, there\u2019s the<em> Title Color<\/em> option you can use to change the color of the item titles. Use the slider or a hex code to pick your desired color. We\u2019ve used the hex code for ours (it\u2019s #ff714a).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"582\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Color.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Style Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Color-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Color-768x461.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Style-Color-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, you can see that the Active item title has changed its color along with the Normal one. That\u2019s because we haven\u2019t set the color for the Active title yet.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Background<\/em> color allows you to color the background of the title field in your accordion. We won\u2019t be using it for our accordion, but we\u2019ve wanted to show you a quick example of what it can look like nonetheless (we\u2019ve changed the background color to default right afterward):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"505\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Title Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Background-Color-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Background-Color-768x400.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Background-Color-620x323.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right underneath, there\u2019s the <em>Title Padding<\/em> option. By increasing the values, you will see that the space around the titles also increases evenly. In case you want to have different values on different sides, you can simply delink the fields using the delink button and reset all the values. From then on, you will get to add different values for each side.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"509\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Title Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Padding-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Padding-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Padding-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve added 27px for the top and 29px for the bottom padding, leaving the left and right padding at zero pixels.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, in the Active settings tab, you will see there is an identical set of options as those in the Normal tab. Like we\u2019ve mentioned above, these settings will apply only to the opened accordion item.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"510\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Active Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-Settings-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-Settings-768x404.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-Settings-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We haven\u2019t changed the <em>Title Active Color<\/em> as we wanted all item titles to have the same color, regardless if they\u2019re active or not. The same goes for the <em>Title Background Active Color<\/em> \u2013 changes will apply only to the active accordion item. We\u2019ve also left this field unchanged (for now).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Title Active Padding<\/em> allows you to set different paddings compared to the normal one. We\u2019ve delinked the values for ours and set the top padding to be at 27 and the bottom at 13.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"509\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Active-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Title Active Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Active-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Active-Padding-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Active-Padding-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Title-Active-Padding-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There is also an interesting effect you can create using these options \u2013 to be more specific, you can set them so that the color changes when an item opens.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Currently, we still have the accordion that has the same active and normal background colors. To differentiate them, simply change the background color of one (or both) tabs.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <em>Normal<\/em> tab, we\u2019ve set the Title Background Color using the hex code (#d5e7f6) and used the same shade for our <em>Content Background Color<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"511\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Accordions Title Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Background-Color-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Background-Color-768x405.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-Title-Background-Color-620x327.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the <em>Content Active Background Color<\/em>, we\u2019ve set it to a more intense shade of blue (#c3e0f8).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"538\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Colors.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Content Colors\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Colors.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Colors-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Colors-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Colors-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve copied this code and went to <em>Active<\/em> settings once again where we pasted this code into the <em>Title Background Active Color.<\/em>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-BG-Color.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Active BG Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-BG-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-BG-Color-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-BG-Color-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Active-BG-Color-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, once you click on the items, you will see that the background color changes depending on their normal or active state.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"572\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles.gif\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, this is only one out of many setting combinations you can use when creating your own accordions and toggles. So feel free to experiment and pick the look that best suits your preferences and matches best with your website design.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that we\u2019ve shown an example of what changing the background colors can do for the overall look of your accordions, we will revert the color options back to the original ones.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"503\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Clear-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Clear Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Clear-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Clear-Settings-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Clear-Settings-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Clear-Settings-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There is another color option you can use to style your accordion, called the <em>Content Color<\/em>. As its name suggests, it changes the color of the text within the items. We\u2019ve set ours to default, black color. Of course, you can change yours to any color you prefer.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"533\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Color.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Content Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Color-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Color-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Color-620x341.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, there is the <em>Content Padding<\/em> option that allows you to change the space around the text (increase or decrease it). We\u2019ve delinked our values and set different ones for each side (set the right at 30px, added 33px for the bottom one, and left the top and left padding at 0px).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"503\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Content Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Padding-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Padding-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Content-Padding-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Border Color<\/em> option will let you adjust the color of the lines between the items themselves. You can set any color you like for this border. We\u2019ve added a hex code and made ours a light grey color (#e1e1e1).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"502\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Border-Color.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Border Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Border-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Border-Color-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Border-Color-768x398.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Border-Color-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right below, the <em>Icon Size<\/em> option allows you to increase (or decrease) the size of the accordion icons. We\u2019ve set ours to be 26px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Size.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Icon Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Size-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Size-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Size-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, there\u2019s <strong>another list of settings that have a switch \u2013 <em>Normal<\/em> and <em>Hover<\/em>.<\/strong> These are the settings that allow you to change the \u201cnormal\u201d icon color as well as its color upon hover.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"581\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Color.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Icon Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Color-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Color-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Icon-Color-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want the color to change when hovering over an icon, make sure to set the different color in the <em>Hover<\/em> tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hover-Icon-Color.jpg\" class=\"attachment-full size-full\" alt=\"Accordions and Toggles Hover Icon Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hover-Icon-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hover-Icon-Color-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hover-Icon-Color-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Accordions-and-Toggles-Hover-Icon-Color-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve added the hex code here that is a slightly paler shade of orange (#ff714aad). Now, our icon has a bit of a fading effect when we hover over it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And that concludes most of the options available in the Accordions and Toggles widget. As for the <em>Advanced<\/em> tab, it contains some options related to the positioning and responsiveness, animations, etc. of your accordions. Still, this tab is available in all Elementor widgets and is not unique to our accordions toggles widget, which is why we won\u2019t cover these options in this tutorial.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"673\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Advanced Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Tab-300x208.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Tab-768x533.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Tab-620x431.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Hit the <em>Publish\/Update<\/em> button to save your accordion once you\u2019re satisfied with the way it looks.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Update-Button.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Update Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Update-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Update-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Update-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Update-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, even if you go back to the <em>Content<\/em> tab and switch your accordion behavior to <em>Toggle<\/em>, all the items will remain open once you click on them, with all the other customization and styling options remaining intact.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Toggle-Type.jpg\" class=\"attachment-full size-full\" alt=\"Toggle Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Toggle-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Toggle-Type-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Toggle-Type-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Toggle-Type-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In short, it\u2019s never too late to change any of the settings in your widget.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you want to create accordions and\/or toggles on your WordPress site to make it more organized and user-friendly, we suggest using the QI Addons for Elementor plugin and its Accordions and Toggles widget. Not only is this widget super intuitive and easy to use, it also comes with tons of options that leave plenty of room for experimentation and allow you to create and customize accordions in all sorts of ways.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Like we\u2019ve mentioned before, these were just some of the examples of how you can combine the options you have available in the Accordions and Toggles widget. You can experiment with the settings to find the look that best fits your preferences. Or, you can go to the widget\u2019s page and check out some of the style examples present there in case you need some additional inspiration. Whichever direction you choose to go in is completely up to you.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Creating accordions and toggles in WordPress is easy with the right plugin. Here\u2019s how to add these useful elements to your site with Qi Addons for Elementor. <\/p>\n","protected":false},"author":2,"featured_media":26991,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,114,4,13],"class_list":["post-26857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=26857"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26857\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/26991"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=26857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=26857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=26857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}