How to Set the Elementor Accordion Widget Closed by Default

Updated: September 13, 2021

Elementor comes with an Accordion widget. Along with the Toggle widget, the Accordion widget is great to create sections like FAQ or the similar ones. When working with the Accordion widget, you can add as many items as you want. By default, the first item of the accordion is set to open and Elementor offers no default setting to make it closed. For some users, it is a bit annoying as the main purpose of adding accordion is to hide information and requires user interaction (clicking an accordion item) to display the information.

So, how to set all accordion items closed by default? You can use the following JavaScript to do so.

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

You can use HTML widget to use the code above. Simply drag the HTML widget and place it right above the Accordion widget. Paste the code to the HTML Code field on the settings panel once the HTML widget is added

That’s it. You can update your page once you are done editing other elements.

While the Accordion is useful to create an FAQ section, you can only add the text content. Plus, there is no option to add the content from a template. You can only add the content manually using the offered classic editor. If you need to add an image accordion section to your page, you can use Elementor add-ons like JetElements and JetTabs.

Originally posted on: September 13, 2021

This page may contain affiliate links, which help support WP Pagebuilders.

Building a website is as fun as playing puzzle with Elementor

Leave a Reply

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

Pin It on Pinterest

Share This

Share This

Share this post with your friends!