I created a custom accordion in elementor with CSS and JavaScript, but I'm facing an issue where the tabs stay open when others are opened. How can I modify the code to make sure only one tab is open at a time?
Below is the CSS code snippet:
body:not(.elementor-editor-active) .toggle-content{
display: none;
}
.toggle-trigger {
cursor: pointer;
}
.arrow i{
transition-duration: 0.5s;
}
.tab_active .arrow i{
transition-property: transform;
-ms-transform:rotate(45deg) !important; /* IE 9*/
transform: rotate(45deg) !important;
transition-duration: 0.5s;
}
And here is the corresponding JavaScript code:
jQuery(document).ready(function($){
jQuery(".toggle-trigger").on("click", function(){
let $this = $(this);
if($this.hasClass('tab_active')){
$this.removeClass('tab_active');
$this.next(".toggle-content").slideUp(200);
} else {
$this.toggleClass('tab_active');
$this.next(".toggle-content").slideDown(200)
}
})
});
The class .toggle-trigger is for the title-tab section while .toggle-content is for the content that slides down on click. The .arrow class is responsible for changing the icon orientation upon clicking.
In addition, I'm experiencing a slight movement of the tab position when the accordion opens. How can I fix the tab position while only allowing the content to slide down?
I've attempted using addClass instead of toggleClass and removing the tab active class with jQuery('.toggle-trigger).removeClass('tab-active') without success. I also tried removing classes from other tabs using not($this), following suggestions on StackOverflow. As a JavaScript beginner, I would greatly appreciate any guidance on this matter.