Easy way to make Accordion closed by default elementor

How to Close Accordions by Default in Elementor When the Page Loads

Are you looking for a way to have your accordions closed by default in Elementor? You’re in the right place! This guide provides an easy solution to ensure your accordions start in a collapsed state, improving the user experience on your website.

Tested and Working as of May 2024

We’ve tested this method thoroughly, and it works seamlessly across all devices, including desktops, tablets, and mobiles. Follow the steps below to implement this feature on your Elementor-powered site.

Step-by-Step Guide to Close Accordions by Default

Using Elementor

Here’s a simple method to close your Elementor accordions by default:

1. Add an HTML Widget:

   • First, navigate to the page where you have your accordion widget.
   • Add an HTML widget to the page. This widget will contain the custom code needed to modify the accordion behavior.

2. Copy and Paste the Code Below:

   • Copy the following code snippets (CSS and JavaScript) and paste them into the HTML widget you just added.

   CSS Code: