3 Simple Methods to Set Elementor Accordion Closed by Default + 10 FREE Accordion Templates!

If you’re looking for
↪ how to keep the elementor closed by default
↪ how to make elementor accordion start closed or any related queries,

I assure you, this is the only blog post you'll need to read.

And by the end of this post, you’ll know…

So without a further ado, let’s dive in…

3 Researched, Tried, and Tested Methods to Set Elementor Accordion Closed by Default

I know when using the Elementor's Accordion widget, the “first item” or rather say the “first slide” of the accordion is open by default & the context is readable. I know you don't like it.

To put salt on the burn, Elementor doesn’t provide any settings to close that “opened” or rather say “active” slide of the accordion.

But no worries, now you can keep the accordion start as closed as

After researching, trying & testing myself, I’ve found 3 simple methods and they are as follows:

• Method 1 – Creating a duplicate accordion & using a tiny CSS code
• Method 2 – Using HTML Widget + JavaScript Code
• Method 3 – Using the One-click toggle settings offered by add-ons

Now let’s dive into the first method…

Method 1: Using CSS Code

Let’s start with steps right away…

Step 1: Duplicate the very first accordion item
(please note – I'm talking about the first item, not the whole widget)

For example, let’s say you’ve 4 accordion items, so just duplicate the very first item
& make the total accordion items as 5.

Step 2: Copy any of the below-provided CSS code

				
					.elementor-accordion .elementor-accordion-item:first-of-type {
display: none;}
.elementor-accordion {
  border-top: 1px solid  #D4DFF2C7;
}
				
			

				
					.elementor-accordion .elementor-accordion-item:nth-child(1) {
display: none;
}
.elementor-accordion .elementor-accordion-item:nth-child(2) {
border-top: 1px solid #D4DFF2C7 !important;
}

				
			

IMP Note: Both of the above-provided CSS codes will function the same i.e.
hide the first accordion item.

The “display: none” property wipes the top border of the second item, so to get it back, make sure to include the border-top CSS code & replace your border color against #D4DFF2C7.

Step 3: Navigate to the Advanced settings of the accordion widget &
paste any of the above CSS codes inside the Custom CSS option.

That's it!

Now if you need a visual guide, here's a quick video that demonstrates
how to close the accordion using the
↪ CSS method,
↪ JavaScript method &
↪ the one-click toggle setting…

Once you’re done adding the CSS code, Update the page & see the magic.

The very first accordion item (duplicated one) will be hidden & the rest accordion will start as closed by default which is exactly what you needed.

Method 2: Using JavaScript Code

In this method, all you need to do is add an HTML widget & a little code that will help you keep the accordion closed. Here's how to do it…

Step 1: Copy the below-provided JavaScript code…

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

Step 2: Just above your accordion widget, place an “HTML Widget” from the elements panel &
paste the above-provided JavaScript code inside the HTML Code.

Step 3: Once done, publish or update the page and see it live.
You'll find your first accordion start as closed (and that's exactly what you googled for)

💡Pro Tip: If you're using multiple accordion widgets on your website and you want the same functionality, simply add the above-provided JavaScript code in the
Elementor > Custom Codes to make the code work on all the pages/posts.

Please note that custom codes, custom fonts, etc. are a premium features
available only to Elementor Pro users.

If you need these awesome features & functionality, give Elementor Pro a shot today!

Method 3: Use One-Click Toggle Setting to Set Elementor Accordion Start as Closed (Using Addons)

👉 Take a look at these 10+ Accordion Templates, that looks classy & elegant and are closed by default.
The best part? It's done with the help of one-click toggle settings.

Here's how you can do it…

Step 1: Click on this special link, and Download the 9+ Elementor Accordion Templates (for FREE)

Step 2: Download & Install ElementsKit Addon & Activate the Accordion Widget

Pro Tip: If you're opting for the Pro version, use Coupon: KULDEEP20 and you save 20% on all plans.

Step 3: Import any of my accordion templates (where all the accordions are set to closed)

Step 4: Customize the style (if needed) and add your own content (question & answers)

That's it!

Now if you're wondering why use an addon?
Here's the deal…

Although both of the above CSS & JavaScript methods work,
I wanted to achieve this (keeping the first slide closed) without code.

So, I tried several different Elementor accordion widgets from the most popular Elementor addons.

Out of all, the ElementsKit accordion widget is the best as it comes with
over 25+ beautifully designed, ready-to-import accordion templates.

Also, it offers a one-click setting to keep the first slide as closed or opened along with
settings enabled on individual items of the accordion to keep them active/inactive.

Settings Offered:

• Settings to Keep the first slide/item auto-open
• Set Individual accordion items as open/closed
• Styling options (5 preset styles to choose from)
• Icon settings & accordion styling options
• 25+ Ready-to-import Accordion Templates

🔥 In a Nutshell: ElementsKit is one of the top-rated & most reliable addons on the market trusted by over 1M+ users & it's one of my top recommendations.

Its pricing starts at $39/yr but by using my special
ElementsKit discount code – KULDEEP20,
you get a FLAT 20% discount on all plans.

→ Explore ElementsKit Addon & Get 20% OFF or first,
→ Read my complete ElementsKit Review

Using addons can be a good option because you don't have to add any scary JavaScript or CSS code & additionally, you get more features & functionality which doesn’t come with both Elementor Free as well as the Elementor Pro version.

With this, all of the 3 methods to close the Elementor accordion are now in front of you,
so act now & feel free to try the one that feels more convenient to you.

If you're okay with downloading the addon, here's a free gift for you…

10+ Modern Elementor Accordion Templates with One-Click Toggle Settings | FREE Download

I personally use accordions on my website & I'm more than happy to provide those accordion templates to you without any cost.

So, if you're interested & willing to use my templates, use the below link to preview & download the templates.

Which Method Should You Choose?

Still Confused? Here's how you can decide…

• If you've got Elementor Pro, Method 1 & 2 is the way to go.
• If you want templates & extra features, Method 3 is your best bet.

Handy Tips for Better Accordion Layouts & Placement for Conversions

I know this section isn’t required but just felt like sharing it, so here I go…

• Use Narrow Layouts: The layout I would personally use & recommend for accordions is a narrow layout with a width ranging from 600 px to 1100 px & not wider than that. Doing so will improve user experience and readability.
• Use Accordions Sparingly: Too many accordion sections can overwhelm users & it's obvious. Stick to only what’s necessary, and group similar content together to make it easy to read.
• Highlight Key Info: Ensure crucial details or calls-to-action (CTAs) are prominent and easy to spot. This helps guide users toward conversions, whether it’s signing up for a newsletter or making a purchase.
• Make It Mobile-Friendly: Test your accordion layout on mobile devices to ensure it’s responsive.
• Track and Adjust: Use heatmaps or user behavior tracking tools to see where users are interacting most. Based on this data, adjust your layout to improve engagement and conversions.

Bonus Tip:

• Use CTA's After Accordions: Placing accordion at the bottom of the page is a standard practice. But adding a call to action right after the accordion section/widget, can get you higher conversions, especially on your landing pages (based on my obversions)

Here’s an accordion example on the landing page of the web host I use…

I hope you got my point.

Now as I mentioned, most people place the accordion at the bottom of the page just before the footer.

Well, that’s almost correct but you’ll need to put little more effort.

But based on my observations, the ideal place to put your accordion widget is at the bottom of the page before a call to action.

Take a look at Elementor’s pricing page itself…

Right after the FAQ Section, there’s a call to action for “Get Cloud Website Builder”

Understood the funda's? Was this information of some value?
If so, I want you to read the next section for me…

Elementor Folks, A Small Request!

For the problem “how to keep elementor accordion default closed” there were already several articles on the Google SERP but still only the JavaScript method was stuffed in most of the articles.

Hence, I researched, tried & tested myself & then compiled all of the above methods along with some tips
to provide more solutions & more value to the community.

So, if you found this blog post helpful, a comment along with a social share
will encourage me to write more & write better.

Now let me answer some of the FAQs.

FAQs | Elementor Accordion Widget

Wrapping Up

Did the first method of adding CSS code work for you or the second one?

If any of the methods did work, can you please comment below
so that fellow Elementor folks know that this content piece is not outdated?

Although I’ve added all the useful information I know about accordions, still I think you must give it a read.

• Smashing Magazine – Accordion Design Best Practices: An in-depth article on accordion design best practices, including when and where to use them for an optimal user experience.

Thanks for giving it a read & if you’ve reached down here, I want you to know that you’re an awesome reader.

Cheers,
Kuldeep