Here’s a Super Simple way to Set Elementor Accordion Closed by Default (With & Without Code) + Bonus Tips on Layouts

CONTINUE READING BELOW

Wanna hide some information or want some user interaction on your pages? Well, that’s the reason you & I use Elementor’s Accordion widget.

But the problem is that the first item of the accordion is open & the context is readable. To put salt on the burn, Elementor doesn’t offer any default settings to make the first item of the accordion closed.

But finally, there's a way to keep the elementor accordion start closed.

By the end of this post, you'll know

  • How to set elementor accordion closed by default with & without using code
  • Is there something better than the Elementor's Default Accordion Widget?
  • A few useful tips on choosing appropriate layouts for the accordion widget & the correct placement for more conversions

So without further ado, let's dive in…

3 Steps to Set an Elementor Accordion Closed by Default (Using Code)

Let's keep the BS aside & directly start with the steps…

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: Place an HTML Widget just above your Accordion widget & paste the above Javascript code inside the HTML Code (as shown in the video below)

Step 3: Publish or Update the page, see it live & shout – Yes, I got the shit done! That’s all you need to set the elementor accordion start as closed.

Quick Note: If you're using multiple accordion widgets on your website, simply add the above-provided javascript code in the Elementor > Custom Codes to make the code work on all the pages & also to save a bit of time.

Now before you leave, here's a bit more useful information for you. Learn how you can make your accordion better than other elementor websites…

How to Set the Elementor Accordion Start as Closed (Without Code)

Quick Note: Lightbox settings are enabled for the images. If you're unable to view it, consider clicking on the image to enlarge it.

Do you know? There’s something better than the Elementor’s default accordion widget & it’s another accordion widget but with capabilities to add images, other widgets & settings to open & close the slides as per your choice.

Well, I’m talking about the accordion widget or rather say widgets offered by the ElementsKit addon. They offer 3 accordions widgets & are as follows…

The best part about these accordion widgets is it's pretty simple to set the accordion as closed because there are default settings available.

Take a look at the settings option for the ElementsKit Accordion widget

ElementsKit-Accordion-Widget-Options

Pretty easy right? Using the ElementsKit Accordion widget, all you need to do is just toggle the option & the accordion slide will be closed by default.

No need to add any javascript code and all.

Along with useful widget options, the Elementskit addon also offers awesome pre-designed styles for all the widgets (which is a time-saver).

ElementsKit-Accordion-Widget-Preview
ElementsKit Accordion Pre-designed Style

So, if you want to set your accordion slides as closed without using code, then consider adding a free or pro version of ElementsKit Addon to your site.

Honest Note: It's been over 8 months since I bought a personal license for the ElementsKit addon (which starts at $39/year) & I don’t regret it.

Their well-designed templates, 85+ widgets & extensions result in a faster workflow.

Along with Crocoblocks plugins, ElementsKit has become my favorite Elementor add-on & I would love for you to give it a shot.

A few tips on choosing appropriate layouts for the accordion widget & where to place it

Although the content within the accordion widget may not be the most read, still I feel it’s important to design & place it well.

The layout I would personally use & recommend for the accordion widget is a boxed-narrow layout. Somewhat around 800px or below.

The reason I’m saying that is because I observed some of the top brands like Elementor.com, Cloudways, Kadence, Fathom Analytics, etc, and found that most of them use a narrow layout.

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

Example-Elementor-FAQ-Layout

The accordion widget is placed inside the box container of width around 737px.

Here’s one more example of my favorite host Cloudways…

Example-Cloudways-FAQ-Layout

Quick Note: I use Cloudways (very popular in FB groups). It's my most recommend hosting for Elementor websites.

If you haven't tried 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. Don't believe my words, just test it yourself.

Try Cloudways FREE for 3 days

I hope you understood the layouts for the accordion or rather say FAQ sections. The sole purpose of narrowing it down is just to provide a better user experience.

Now here are some FAQs on Elementors Accordion Widget…

FAQs | Accordion Widget

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

There are two ways to keep the accordion stay closed by default in Elementor. One of the methods requires you to add a little javascript code (provided above) inside the HTML widget & place it above the accordion widget to make it closed.

The second & the easy method is adding a free plugin (ElementsKit) & using its accordion widget where all you need to do is just toggle the option (on & off) & the accordion slide will be set to close by default. You won't need to add any javascript code and all. You can get the ElementsKit plugin here.

What is the difference between toggle and accordion in Elementor?

Elementors Toggle & Accordion widgets are somewhat identical in terms of UI as well as functionality. However, there's a slight difference between the Toggle widget and the Accordion widget.

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.

What is Image Accordion in Elementor?

Sadly Elementor itself doesn't offer an Image Accordion widget but other developers such as WPmet & many more offers such unique widgets.

One of those is ElementsKit Image Accordion widget that lets you display multiple images in an accordion style with stunning hover animations and effects.

It gives 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.

You can know more about ElementsKit Image Accordion here.

A Quick Tip on the Correct Accordion Placement

Talking about the placement of the Accordion widget (or rather say FAQ widget as it’s mostly used for that purpose), some of the folks place it just before the footer.

But that’s not what big players do.

Based on my observation, the ideal place to put your accordion widget is at the bottom of the page but before the Call to action.

Yup, that’s what is mostly used.

This means, that right after the FAQ section, you must add a call to action which will help you get better conversions.

Consider reading: How to Design your WordPress website like a pro even if you’re a beginner

I hope this short tutorial helps you close the elementor accordion widget.

Also, these tutorials might be helpful to you:

Are you trying some elementor addons these days?

  • Checkout JetBlog (review) which helps you design a better elementor based blog
  • Checkout JetElements (review) which helps you level up your design game

If this tutorial helped you then do let me know in the comments below. It will be helpful for other readers as well 😀

Lastly, I know you’re good at hitting those share buttons, especially the Facebook one 😉

Give it a Share
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
creating a new website?

Get started quickly with my FREE WordPress setup service.

want to know what I use?

Check out my complete list of tools that work in the now.

4 Comments

Leave a Reply

Your email address will not be published.