Here’s an Easy way to Set Elementor Accordion Closed by Default + A Few Tips on Layouts & where to place it

Set-Elementor-Accordion-Closed-by-Default

Disclosure: My blog is reader-supported. Some of the links on this page may contain affiliate links. If you decide to purchase from my affiliate links, I’ll be thankful to you.

Wanna hide some information or want some user interaction on your pages or put more information in less space?

Well, that’s the reason you & I use Elementor’s Accordion widget.

But the problem is, the first item of the accordion is open & the context is readable. Which most of us don’t like.

To put salt on the burn, Elementor doesn’t offer any settings to make the first item of the accordion closed.

But finally, there's a way to close elementor accordion.

By the end of this post, you can go

Elementor-Advanced-Accordion

Here's what I've covered in this post…

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.

How do you keep an Elementor accordion closed by default?


Let me start directly 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 & dance. That’s all you needed to shut up the first item of the accordion.

Need something better? I’ve researched & found something for you…

What’s better than the Elementor’s Default Accordion widget?


If there’s something better than the Elementor’s default accordion widget, it’s another accordion widget with capabilities to add images, other widgets & settings to open & close the item as per your choice.

Well, I’m talking about the accordion widget that comes with the ElementsKit addon.

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

ElementsKit-Accordion-Widget-Options

Pretty easy right? Just toggle the option. No need to add any scary javascript code and all. ElementsKit addon is just awesome.

Along with useful options, it also offers awesome pre-designed styles for all the widgets which I personally like.

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

It's been over 6 months that 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 also become my favorite Elementor Addons which I highly recommended.

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 own FAQ section on their pricing page:

Example-Elementor-FAQ-Layout

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

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

Example-Cloudways-FAQ-Layout

Quick Note: I personally 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 this weekend & I'm sure you'll be surprised by the lighting speed.

Try Cloudways for FREE

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 is at the bottom of the page but before the Call to action.

Yup, that’s what mostly used.

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

If this short tutorial helped you close the elementor accordion widget, thanks in the comment will be much appreciated.

Lastly, I know you’re good at hitting those share buttons 😉

Give it a Share
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Leave a Reply

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