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

Set-Elementor-Accordion-Closed-by-Default

Disclosure: My blog is reader-supported. Some of the links on this page may contain affiliate links. Learn more


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 accordion closed by default in Elementor 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 placement

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: Insert 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 & enjoy. That’s all you need to set the elementor accordion start as closed.

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: I've enabled lightbox for some of the images. If you're unable to view it, consider clicking on the image to enlarge it.

You know what 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 offered by the ElementsKit addon. It's pretty simple to set the accordion as closed bcoz there are default settings available.

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

ElementsKit-Accordion-Widget-Options

Pretty easy right? 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 really 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 ElementsKit Addon to your site.

Honest Note: It's been over 6 months since I’ve bought a personal license 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 addons & 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 is around 737px.

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

Example-Cloudways-FAQ-Layout

Quick Note: I use Cloudways Digital Ocean (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).

Try Cloudways FREE for 3 days

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

The Correct 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. 

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, 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:

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.

Leave a Reply

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