3 Simple Methods to Set Elementor Accordion Closed by Default along with A Few Handy Tips for Conversions

The Problem & the Known Solutions Upfront: When using the Elementors Accordion widget, the “first item” or rather say the “first slide” of the accordion is open by default & the context is readable which most of us don’t like.

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

Hence you might have googled – “how to make the accordion closed by default” & probably landed on this blog post. I can honestly say that this is the only blog post you’ll need to read because I've done it myself.

Check the FAQ section on my New Year Special Offer page, the accordions are closed by default & it's done with the help of one-click toggle settings.

After researching, trying & testing myself, I’ve found 3 simple methods by which you’ll be able to close the accordion. They are…

  • Creating a duplicate accordion & using a tiny CSS code
  • Using HTML Widget + JavaScript Code
  • Using the One-click toggle settings offered by add-ons (I used this on my Cloudways Bonus page)

By the end of this post, you'll know

  • 3 different methods to set elementor accordion closed by default (with & without code)
  • How you can supercharge your accordions & extend their functionality
  • Handy tips on creating appropriate layouts for the accordion widget
  • And lastly, the correct placement of the accordions for more conversions

So without further ado, let's dive in…

3 Researched, Tried & Tested Methods to Set Elementor Accordion Closed by default

A Quick Honest Note: Methods & steps listed in this blog post do require you to add codes & some will need you to install additional plugins (free & paid)

Also, note that my blog is reader supported hence some of the links to products mentioned are affiliate links (won’t cost you anything extra) & I’ll appreciate it if you use them to purchase the product as those little commissions keep the lights on at my home 🙂.

Method 1: Create a Duplicate Accordion Item to Make Elementor Accordion Closed by Default (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 amount of accordion items 5.

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

CSS Code 1 (Recommended)

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

CSS Code 2 (This too works)

				
					.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 codes will function exactly 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.

Need a visual guide? Here's a short video that demonstrates how to close the accordion using the CSS method (Code 1)…

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 will start as closed by default which is exactly what we needed.

😑 Spoiler Alert: You’ll need the Elementor Pro to be able to implement the above method. The custom CSS code is just one of the many advanced features you'll have access to with the Elementor pro version.

I won't waste your time with unnecessary sales pitches just because I'm an affiliate. Instead, let me be straightforward with you. If you're using Elementor, it's just a matter of time until you'll need to upgrade to the pro version.
So my friend, why not make the investment today?

If you're not yet convinced, I invite you to compare the free version with the pro version.

You'll see exactly what you're missing out on, and why Elementor Pro is the logical choice & that's why I personally have 25 site licenses, & I'm using it on all of my niche sites, including this personal one.

Get Elementor Pro today & try it for a month and then decide if you want to keep it or not as they offer a 30-day money-back guarantee with no strings attached.

Method 2: An HTML Widget that helps you Keep Elementor Accordion Closed by Default (Using JavaScript Code)

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.

Check out this short video for reference…

Step 3: Once done, publish or update the page, see it live & shout – Yes, I got the shit done! Just kidding, that’s all you need to set the elementor accordion start as closed.

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 feature available only to Elementor Pro users.

I don't wanna pitch again & again, but if you need such features & functionality, give Elementor Pro a shot & if you don't like it, you're covered by their 30-day money-back policy.

Method 3: Use the Simple One-Click Toggle Settings to Set Elementor Accordion start as closed (Using Add-ons)

Although both of the above methods work, I wanted to achieve this (keeping the first slide closed) without code, so I tried several different accordion widgets from the most popular elementor add-ons.

To name a few they are QI Addons, ElementsKit, Essential Addons, Element Pack Pro, Royal Addons, The Plus Addons, Xpro Addons, Happy Addons, and Powerpack Elements.

Out of 9 Elementor addons, only 4 of them listed below provided a one-click setting to keep the first slide or individual item of the accordion as closed or opened.

Here are the add-ons that provide such functionality…

1) ElementsKit: This addon offers a one-click setting to keep the first slide as closed or opened and also, settings on individual items of the accordion to keep them active/inactive. What I liked about ElementsKit is it offers 16+ ready-to-import elementor accordion templates for faster workflow.

The accordion widget below by the FAQ section on my New Year Special Offer Page is designed with this ElementsKit addon.

ElementsKit Lite Accordion Widget Options

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
  • 16+ Ready to Import Accordion Templates

Addon & Widget Info:

2) Essential Addons: Similar to ElementsKit, it offers settings with the name “Active as Default” on Individual accordion items to set them as closed or open. By default, all the accordions are inactive.

Essential Addons Accordion Widget Options

Settings Offered:

  • Accordion Type: Choose from Accordion or Toggle
  • Accordion Tab's Title Tag (HTML Tags for SEO)
  • Toggle options to Enable FAQ Schema
  • Toggle Icon, Positions & Speed
  • Set Individual accordion items as open/closed
  • Icon settings & accordion styling options
  • Content type: Content (text) or Saved Template

Addon & Widget Info:

3) Element Pack Pro: This addon offers the most settings for the accordion widget. Offers simple toggle settings to set all accordion items as collapsible & more powerful options.

ElementsPack Pro Accordion Widget Options

Settings Offered:

  • Accordion Type: Choose from Accordion or Toggle
  • Easily Set Active Item No
  • Set all items as collapsible or multiple open
  • Accordion Tab's Title Tag (HTML Tags for SEO)
  • Additional Hash Location & Scrollspy settings
  • Icon settings & accordion styling options
  • Content type: Content (text) or Saved Template

Addon & Widget Info:

4) Powerpack Elements: This one seriously adds more power to the accordions as it comes with features (almost combined) of all the above-listed addons.

PowerPack Elements Accordion Widget Options

Settings Offered:

  • Accordion Type: Choose from Accordion or Toggle
  • Set Individual accordion items as open/closed
  • Accordion Tab's Title Tag (HTML Tags for SEO)
  • Set Toggle Animation Speed
  • Icon settings & accordion styling options
  • Content type: Content (text) or Saved Section, Widget, or Saved Elementor Template

Addon & Widget Info:

Well, that was a lot of information, isn’t it?

Using add-ons can be a good option because 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, feel free to try the one that feels more convenient to you.

Now before you leave, here’s some additional information that will be helpful for you whenever you create accordions…

A Few Handy Tips on Accordion Layouts & Correct Placement for Conversions

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

Pro Tip: The layout I would personally use & recommend for accordions is a narrow layout where the width is somewhat between 600 px to 1100 px & not wider than that.

It’s not a hard & fast rule but that’s what I’ve observed on popular websites. Feel free to extend the width but still keep it a bit narrow.

Any Reasons?

Yup, it’s just for a better user experience.

Honestly speaking, I haven’t been to any design school or taken any courses, I just try to learn by observing. And based on my observations, I learned that most of the top WordPress brands use narrow layouts on their own website.

Take a look at Elementor’s own FAQ section on their pricing page

Example - Elementor's Accordion Layout Width (under 1100px)
Example of Narrow Layout for Accordion/FAQ Section

Here’s one more example of the web host I use & recommend for Elementor websites

Example-Cloudways-FAQ-Layout
Example – Cloudways Accordion Layout

Transparency Note: I don't use nor recommend traditional hosting services like Bluehost, GoDaddy, etc which you might have been bombarded with (mostly from the affiliates)

Especially for sites built with page builders like Elementor, I use Cloudways (very popular in FB groups & highest rated in polls by real people, not by the affiliates).

It's one of my most recommended hosting for Elementor websites as it's not a shared hosting but a managed cloud hosting provider which has got 4.5-star ratings from over 1500+ users on Trustpilot.

Most of the elementor folks are already using their free migration service & moving their site to Cloudways for blazing-fast speed, better uptime, faster WordPress admin area, free SSL, free automated backups, one-click staging environment, and most importantly, the pay-as-you-go model i.e no-lock-in periods.

If you haven't tried Elementor on Cloudways yet, give it a shot today & I'm sure you'll be surprised by the lightning speed. You'll love your WordPress dashboard (backend) & also the Elementor editor. I use it & I can proudly recommend it.

Try Cloudways FREE for 3 days (No credit card required)

I hope you got my point.

Now talking about the placement of the accordion widget, most of the folks place them 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.

Pro Tip: Right after the accordion section/widget, you must add a call to action to get more conversions, especially on your landing pages bcoz that’s what the big players do.

Once again, take a look at Elementor’s pricing page itself…

Example - CTA after Elementor's Accordion widget
A CTA after the Accordion/FAQ Section can get you more conversions

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

Understood the fundas? 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.

Also, if you’re planning to purchase any of the product (which is not an endorsement but a recommendation) then I would highly appreciate using my affiliate links bcoz those little commissions keeps the sidebar clean, I hope you got the drift 🙂

Now let me answer some of the FAQs.

FunFact: I’m not using any accordion or toggle widget for the FAQ section on this blog post, instead, I’m using Rank Math’s FAQ Schema block as I'm writing this post using the default Gutenberg editor & also for SEO purposes 😉

FAQs | Accordion Widget

Should I keep accordion items closed or open?

Keeping the accordion items (especially the first one) closed or open is completely up to you. Most web designers/creators keep the first slide of the accordion closed to get some user interaction while some keep it open by default. There's no hard and fast rule for this, so feel free to design your own as you like.

What is the difference between toggle and accordion in Elementor?

Elementors Toggle & Accordion widgets are somewhat identical in terms of UI and functionality.
The difference is when an Elementor-based page is loaded, all the Toggle widget items are closed/collapsed whereas, with the accordion widget, only the first item is expanded/open & rest all the other items remain closed/collapsed. Also, with the accordion, only one item of the accordion will be opened at a time whereas the items in the toggle can be opened & kept open all at once.

How do you make the accordion stay closed by default in Elementor?

There are 3 simple methods to keep the accordion stay closed by default in Elementor. Out of 3, two of the methods require you to add a little CSS/Javascript code (provided above) to make it close.

The third & easy method is using the one-click settings offered by third-party add-ons such as ElementsKit, Essential Addons, ElementsPack Pro, and Powerpack Elements to keep your accordions closed.

What is Image Accordion in Elementor?

In simple words – Image accordion lets you display multiple images in an accordion style with stunning hover effects & animations.

Sadly Elementor itself doesn't offer an Image Accordion widget but other third-party add-ons offer such unique widgets.

A few of them are ElementsKit Image Accordion, Essential Addons Image Accordion, ElementsPack Image Accordion & Powerpack Image Accordion, etc give you the flexibility to highlight multiple images in one place with many different unique styles where you can set custom titles, subtitles, descriptions, call to action, etc. It's one of those interactive & creative widgets that will amaze your website visitors.

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, I’ll continue to add more & keep this content even more thorough & fresh.

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

Seems like you’re good at hitting those share buttons, especially the Facebook one 😉

Was it Helpful? Give it a Share
Facebook
Twitter
LinkedIn
Stay in the loop

Get the latest content, Elementor tips & tricks delivered straight to your Inbox. Only once in two weeks & that too, curated for you based on your interests.

24 Comments

  1. Excellent, I’ve tried a few things that were supposed to work but none did. The only thing, is that now just above the first visible item, there’s a very thin line going across the top…how do I get rid of that? There are no borders on my accordion widget items.

    1. Hey David, thanks for dropping a quick comment.
      I just checked your site & found that you’re using the code while keeping the borders to 0px & that’s why there’s a thin line on the top.
      No worries, you can do two things to solve this.

      First is, to enable the border (1-2px) from the accordion widget settings & change the border color from this #D4DFF2C7 to this #FF914D in the Custom CSS code.
      This way you’ll have a nice solid border on your accordion items.

      Secondly, if you don’t want any borders then simply remove the “border-top” property from the CSS code.
      Doing this will give you a plain simple accordion without borders.

      I hope this helps.

      Cheers,
      Kuldeep

    1. Yes, it’s possible.
      I’m not a power user too so I can’t provide you a quick CSS or JS Code but I can suggest using ElementsKit addons at the moment.
      ElementsKit offers 3 unique accordion widgets with capabilities to set any accordion slide as closed/opened.

      Lastly, I would like to share that Christmas deals are live, so if you’re looking to grab any of the Elementor addons, now is the best time.
      Feel free to give it a quick look – https://kuldeeprathore.com/christmas-new-year-wordpress-deals/

      I hope this helps.

      Cheers,
      Kuldeep

  2. For those of you looking for a fix to the custom accordion delay you just need to modify the delay. It looks like Elementor adjusted their accordion with a delay to make the first one active. A delay of 1200 seems to fix it. It has a little flicker, but it’s better than not working 🙂

    var delay = 100;

    Hopefully, that helps someone!

    1. Thank you Ben for your valuable Input.
      And ya, it’s helpful for all of us.

      Wishing you the best of luck with your design & WordPress services.
      Once again thanks for adding more value & information to this post.

      Have a great week ahead.

      Cheers,
      Kuldeep

  3. This was working beautifully up until a few days ago. Any idea if something has changed, and maybe this snippet needs fine tuning?

    1. Hey Sasser, thanks for your comment.

      Yes, you’re right. Maybe this snippet needs a checkup now.
      I’ll look into the issue & come up with more solutions soon (once I’m back from a vacation)

      Until then, if you’re comfortable adding a new addon, I would advise you (just like many others) to use the ElementsKit accordion widget.
      It offers simple one-click toggle settings to keep the accordions in an active or closed state.

      Click here to check out some of the demos & features of the widgets provided by ElementsKit & see if it fulfills your end goal.
      Even the free version will do the job, so feel free to check it out.

      I hope this helps & I’ll get back to you soon.

      Cheers,
      Kuldeep

  4. I added the code on one Elementor pop-up (no not to Elementor in general via custom code) It worked fine on the accordion on the pop-up. However it also was applied on accordions on other pages…which I did not want it to. What to do?

    1. Hey Charlotte, thanks for sharing your issue in detail.

      So sorry to hear that but worry not.
      I’ll look into the issue & come up with more solutions soon (once I’m back from a vacation)

      Until then if you’re comfortable adding a new addon, I would advise using the ElementsKit accordion widget.
      It offers simple one-click toggle settings to keep the accordions in an active or closed state.

      Click here to check out some of the demos & features of the widgets provided by ElementsKit & see if it fulfills your end goal.

      I hope this helps & I’ll get back to you soon.

      Cheers,
      Kuldeep

  5. I used the code and it worked great, but seems after the elementor upgrade it stopped working, or is it just my website?

    Keep good tips like these coming 😀

    1. Hey Soren, can I know which version you’re currently on?
      Also, can you share your website URL or the page where you’re using accordions?

      The first code method works for most of the versions.

      If you’re comfortable adding a new addon, I would advise using the ElementsKit accordion widget.
      It offers simple toggle settings to keep the accordion active or closed.

      Click here to Check out some of the demos & features of the widgets provided by ElementsKit.

      I hope this helps & thanks for your kind words 😀

Leave a Reply

Your email address will not be published. Required fields are marked *