CODEWITHSUNDEEP
javascriptjquery
BornaG
BornaG

Reputation: 19

How to make accordion close when other is open

I need help with some elementor accordion...

This is my code:

jQuery(document).ready(function () {
    jQuery('.elementor-tab-title').click(function () {
        let active = document.querySelectorAll(".elementor-tab-title elementor-active");
        for(let j = 0; j < active.length; j++){
         active[j].classList.remove("elementor-active");
         active[j].nextElementSibling.style.maxHeight = null; //or 0px
        }
    });
}
);

So, area-selected and area-expanded is switching to false when is closed and to true when its opened.

Class is switching from 'elementor-tab-title' when closed to 'elementor-tab-title elementor-active' when opened.

There are 6 of them, and I just can't figure out how to make them close when another is clicked to open.

Any help is appreciated. Thank you!

Upvotes: 0

Views: 1321

Answers (2)

Code helper
Code helper

Reputation: 1

Using this script you can Set Elementor Accordion Closed by Default!

Here is script and step that really work for me I did use this on my site.

Upvotes: -1

riffnl
riffnl

Reputation: 3183

You don't need to loop yourself using vanilla, you could use jQuery to do that for you.

jQuery(document).ready(function () {
    jQuery('.elementor-tab-title').click(function () {
        jQuery('.elementor-tab-title').removeClass('elementor-active');
        jQuery(this).addClass('elementor-active');
    });
});

Basically you're saying : remove all active classes regardless which one has it for all the tab-titles and add the active class to the clicked item (which is "this")

Upvotes: 1

Related Questions