Are you searching for how to set the Elementor accordion widget closed by default? If so, you’ve come to the right place!
The accordion widget is a powerful tool that allows you to create collapsible sections on your website. It’s perfect for organizing content and giving users the ability to expand or collapse specific sections as they navigate through your site.
However, by default, the accordion widget is set to open, which might not always align with your preference. By implementing a few tweaks in Elementor’s settings, you can ensure that your accordion widget remains closed when users first land on your page.
In this blog post, I will guide you through a step-by-step process on how to set the accordion widget closed by default in Elementor.
So without further ado, let’s jump right into it!
How to Set the Elementor Accordion Widget Closed by Default
The process of setting the accordion widget closed by default in Elementor is pretty simple and only needs to follow a few easy steps.
The process involves a small piece of JavaScript code that you have to copy and paste into the page. Here is the code:
Open the page where you have an accordion widget, search for the HTML widget from the left sidebar, and drag and place it right above your accordion widget, as shown in the above image.
Next, you have to paste the JavaScript code that you copied earlier into the “HTML Code” field.
Voila! Now, update the changes and see if the accordion widget is closed or not.
Have more than one accordion widget on your website? Don’t worry; Elementor offers a Custom Code feature that allows you to add custom codes that will affect the whole website instead of individual posts or pages.
To implement this, go to “Elementor > Custom Code” and click the “Add New” button.
Next, provide a name to your custom code and paste the code under the given field, as shown in the above image. Under “Location,” you can select any option you want; your code will work on any location.
After publishing the code, open any page that contains the accordion widget on the browser and see the results.
💡 Recommended Readings…
Final Words
In conclusion, setting the Elementor accordion widget to be closed by default is a simple yet effective way to enhance user experience on your website.
We have explored the method involved in using custom CSS code to override the default behavior of the accordion widget. Simply, follow every step mentioned in the above guide and close the Elementor accordion widget by default.
