Elementor Close Accordion By Default On Page Load (Works)

Elementor Close Accordion By Default On Page Load (Works)

Table of Contents

There are many tutorials online showing you how to close the Elementor accordion by default, on page load. Many of them stopped working, after Elementor changed their JavaScript load order in a recent update.

Most code snippets you will find online also don't respect accessibility standards: they don't update the aria attributes to their proper values, or the tabindex value. My code here takes care of that as well.

The code you will find here is tested working and will successfully close your Elementor accordion by default, on page load.

Elementor Close Accordion by default code

Simply copy paste the code below in an HTML element, on the same page, to close all the Elementor accordions on your page by default, on page load.

Elementor Close Accordion By Default On Page Load (Works) 1

<script>
window.addEventListener('load', function() {
let accordionsElems = document.querySelectorAll('.elementor-widget-accordion')
accordionsElems.forEach(e => {
let activeTitle = e.querySelector('.elementor-tab-title.elementor-active');
let activeContent = e.querySelector('.elementor-tab-content.elementor-active')
jQuery(activeContent).slideUp();
activeTitle.classList.remove('elementor-active');
activeContent.classList.remove('elementor-active');
activeContent.setAttribute('hidden','hidden');
activeTitle.setAttribute('aria-expanded',false);
activeTitle.setAttribute('aria-selected',false);
activeTitle.setAttribute('tabindex',-1);
});
});
</script>

Close Elementor Accordion by default in a popup

If you want to close an Accordion that's in a popup, simply add this code, in an HTML element.

Importantly, the HTML element needs to be inside the popup.

<script>
(function() {
let tester = 0;
let myTimeout = setInterval(function() {
tester++;
if (tester < 30) {
let accordionsElems = document.querySelectorAll('.elementor-popup-modal .elementor-widget-accordion');
if (accordionsElems) {
accordionsElems.forEach(e => {
let activeTitle = e.querySelector('.elementor-tab-title.elementor-active');
let activeContent = e.querySelector('.elementor-tab-content.elementor-active');
if (activeTitle) {
jQuery(activeContent).hide();
activeTitle.classList.remove('elementor-active');
activeContent.classList.remove('elementor-active');
activeContent.setAttribute('hidden', 'hidden');
activeTitle.setAttribute('aria-expanded', false);
activeTitle.setAttribute('aria-selected', false);
activeTitle.setAttribute('tabindex', -1);
clearInterval(myTimeout);
}
});
}
} else {
clearInterval(myTimeout);
}
}, 100);
}());
</script>

Close the mobile Elementor Tab Accordion by default, on page load

The Elementor Tabs element also becomes an accordion, on mobile viewports. To close that accordion by default, use the code below.

<script>
window.addEventListener('load', function() {
let tabsElems = document.querySelectorAll('.elementor-widget-tabs')
tabsElems.forEach(e => {
let activeTitle = e.querySelector('.elementor-tab-mobile-title.elementor-active');
let activeContent = e.querySelector('.elementor-tab-content.elementor-active')
activeContent.style.display = 'none';
activeTitle.classList.remove('elementor-active');
activeContent.classList.remove('elementor-active');
activeContent.setAttribute('hidden','hidden');
activeTitle.setAttribute('aria-expanded',false);
activeTitle.setAttribute('aria-selected',false);
activeTitle.setAttribute('tabindex',-1);
activeTitle.addEventListener('click',function(){
activeTitle.classList.add('elementor-active');
activeContent.classList.add('elementor-active');
activeContent.removeAttribute('hidden');
activeTitle.setAttribute('aria-expanded',true);
activeTitle.setAttribute('aria-selected',true);
activeTitle.setAttribute('tabindex',0);
activeContent.style.display = 'block';
})
});
});
</script>

Finally, enjoy your closed by default Elementor Accordion!

I really hope you found this tutorial useful.

Cheers!

Looking for something else? Search across 2445 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply