Skip to content
Ultra Addons
Ultra Addons

Ultra Addons

Best Elementor addons WordPress Plugin

  • Home
  • Features
    • Extension
    • Widgets
    • Changelog
  • Templates
  • Pricing
  • Products
    • Product Table for WooCommerce
    • Min Max Quantity & Step Control
    • Quantity Plus Minus Button
    • Post Classified for making Documentation
    • Add to Cart Text Changer
    • Astha WordPress Theme
  • Doc
  • Blog
Get UltraAddons
default the accordion

how to close by default the accordion in elementor

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.

Table of Contents

  • Why did Accordion close by Default Elementor?
  • What is the difference between Toggle and Accordion in Elementor?
  • How to Close by Default the Accordion in Elementor
  • Method 1:  By JavaScript Code
  • Why did Accordion close by Default Elementor?
  • What is the difference between Toggle and Accordion in Elementor?
  • How to Close by Default the Accordion in Elementor?
  • Method 1:  By JavaScript Code
  • Method 2:  By Addons Elementor Plugin
  • Ultra Addons
      • The Most Popular Elementor Addons
    • Final Words

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:

  1. 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.
  1. 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:

  1. 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.
  1. 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:

  1. 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.
Special Discount for ultra addons

Ultra Addons

The Most Popular Elementor Addons

Get Up To 53% Discount

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!

Related Article
Fix Your Elementor Nav Menu
UltraAddons for Elementor Free VS Pro
Best Elementor Addons for WordPress
Elementor Ultra Addons web design website wordpress

Share

Post navigation

Previous: 8 Ways to Fix Your Elementor Nav Menu Is Not Working Issues [ 2022 ]
Next: What Happens When Your Elementor Pro License Expires?

Get Started Now

Download UltraAddons Elementor Lite for completely
free and start making beautiful websites today.

Free Download
Get Premium
Subscribe to our Newsletter
Resource
  • Ready Templates
  • Documentation
  • Changelog
  • Video Tutorial
  • Blog & News
  • Write For Us
Company
  • Our Service
  • Get Quote
  • Refund Policy
  • Support Policy
  • Privacy Policy
  • Terms of Service
Our Products
  • Product Table for WooCommerce
  • Min Max Quantity & Step Control
  • UltraAddons Elementor Lite
  • Quantity Plus Minus Button
  • Post Classified for making Documentation
  • Add to Cart Text Changer
  • Astha WordPress Theme
Facebook-f Twitter Linkedin Instagram Youtube
© 2022, UltraAddons from CodeAstrology. All Rights Reserved
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT