The Accordion widget is a handy Elementor widget that allows you to display text in a collapsed, condensed manner. It’s a great way to save some space on your page.
They let you display text in a collapsed format, freeing up more room for other content. You can use accordion widgets in Elementor to make it easy to see what’s going on at a glance.
When a user visits an accordion widget in Elementor, they can scan the item titles and choose to expand only if it is of interest.
This blog article will teach you how to close by default the accordion in elementor, saving you time and simplifying your work process.
Why did Accordion close by Default Elementor?
The accordion is always open by default.
Pre-built by elémentor and no settings to close all of the items.
So, in that case, when any user visits your accordion page, he/she will see that the first item of the accordion is open & the context is readable and the rest of the items in the accordion are closed.
What is the difference between Toggle and Accordion in Elementor?
Mainly two differences between them:
- When a page is loaded, all of the elements in the Toggle widget are in their collapsed state. But when you use the Accordion widget, just the first item expands, while the rest of the elements stay in their collapsed states.
- Using the Toggle widget, the user can expand as many things as they want at the same time. On the other hand, you can only expand one item at a time with the Accordion widget. When you open one accordion item, the one that was already open closes right away. This gives the whole thing the look of an accordion.
How to Close by Default the Accordion in Elementor
Elementor is an incredibly powerful WordPress theme with a diverse range of features. However, one of the more understated features that it has is the ability to close the accordion by default in elementor. If you want to close an accordion by default, please follow these steps.
Method 1: By JavaScript Code
You need to add some JavaScript code to the Elementor accordion widget. It is quite easy. Don’t worry about it. To add JS code to elementor, follow my steps.
First, you have to drag & drop the accordion Elementor widget on your page.
When a user visits an accordion widget in Elementor, they can scan the item titles and choose to expand only if it is of interest.
This blog article will teach you how to close by default the accordion in elementor, saving you time and simplifying your work process.
Why did Accordion close by Default Elementor?
The accordion is always open by default.
Pre-built by elémentor and no settings to close all of the items.
So, in that case, when any user visits your accordion page, he/she will see that the first item of the accordion is open & the context is readable and the rest of the items in the accordion are closed.
What is the difference between Toggle and Accordion in Elementor?
Mainly two differences between them:
- When a page is loaded, all of the elements in the Toggle widget are in their collapsed state. But when you use the Accordion widget, just the first item expands, while the rest of the elements stay in their collapsed states.
- Using the Toggle widget, the user can expand as many things as they want at the same time. On the other hand, you can only expand one item at a time with the Accordion widget. When you open one accordion item, the one that was already open closes right away. This gives the whole thing the look of an accordion.
How to Close by Default the Accordion in Elementor?
Elementor is an incredibly powerful WordPress theme with a diverse range of features. However, one of the more understated features that it has is the ability to close the accordion by default in elementor. If you want to close an accordion by default, please follow these steps.
Method 1: By JavaScript Code
You need to add some JavaScript code to the Elementor accordion widget. It is quite easy. Don’t worry about it. To add JS code to elementor, follow my steps.
First, you have to drag & drop the accordion Elementor widget on your page.
Then you have to drag and drop the HTML block Elementor widget in the same section before the accordion. Like in the screenshot below.
After you drag and drop the HTML block Elementor widget,
Now, copy and paste the JavaScript code into the HTML block box.
JavaScript Code:
JavaScript Code for Mobile Devices:
Now update the page and then refresh the page.
You will get that accordion widget closed by default in Elementor.
Method 2: By Addons Elementor Plugin
If you aren’t comfortable adding code then you can simply do that by the UltraAddons plugin and add the Advance Accordion Widget.
First, have a quick view of the UltraAddons plugin intro,
UltraAddons The powerful Elementor page builder addons. One addon has lots of possibilities. If you look at the main features, you will get
- Pre-built Templates And Blocks.
- 72+ Unique Widgets.
- WooCommerce Based Widgets.
- 6 Types of Form Styler Widgets.
- 7 Types of Interactive Chart Widgets.
- 11 Powerful Extension
- You Can Create Stunning Floating Animation.
- Get Regular Updates.
- 24/7 Technical Support.
Want to know how to set it, follow me:
- Install and activate the plugin through the WordPress dashboard.
If you want the pro version, you can get it from this link.
These plugin widgets will be added to elementor widgets once activated.
2. When you try to search for the accordion widget in the Elementor Search Widget box, you will find 3 types of UltraAddons accordions.
Here you have to choose only the UltraAddons accordion widget like the picture.
3. Drag and drop the UltraAddons accordion widget.
4. You will see an UltraAddons accordion widget, like below.
5. Under the Content tab, select the accordion.
6. Just turn off the Set as a Default toggle button.
7. Don’t forget to save it by clicking the UPDATED button.
That’s it! Your accordion widget is closed by default in Elementor.
Tips:
- If you decide to use JS code, do not forget to use both the desktop and mobile version code.
- The width of a mobile phone is 425 in the above code, but you can use whatever width you want.
Final Words
If you’re looking for a way to customize your Elementor site’s layout and design, or just want to learn more about how it works, be sure to check out our help section.
If you’re struggling to figure out how to close an accordion in Elementor, our helpful guide might be able to help. There are a few different ways to close an accordion in Elementor.
In addition, we’ve included a few tips on how to close by default the accordion in Elementor. Hopefully, these will help you get started with using Elementor quickly and easily!
Thanks for reading!