Question 1862 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to make Accordion open one at a time in Elementor? – WordPress

I have made my own accordion in elementor using CSS and Javascript. If works fine, except for one problem: they stay open when other tabs are opened. How should I modify the code, so that the other tabs collapse when one tab is opened.

Here is the CSS code.

    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 JavaScript.

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 applied to the inner-section which is to be used a the title-tab and .toggle-content is applied to the inner-section which slides down on click.
The class .arrow is for the icon to change its orientation on click.

Also, when the accordion is opened, the position of the tab moves a bit up and the content slides down, how should I change it so that the position of the tab is fixed and only the content slides down?

I have tried using addClass instead of toggle class and removing the tab-active class using jQuery(‘.toggle-trigger).removeClass(‘tab-active’) but it didn’t work. Also, according to suggestions to this question on StackOverflow I also tried to remove class from other tabs using not($this). I am new to JavaScript and would appreciate any help.

Tags:

2

Answers


  1. 0

    Try this

     jQuery(".toggle-trigger").on("click", function(){
     let $this = $(this);

     const $currentActive = jQuery(".toggle-trigger.tab_active");

     $currentActive.next(".toggle-content").slideUp(200);
     $currentActive.removeClass('tab_active');
        
     $this.addClass('tab_active');
     $this.next(".toggle-content").slideDown(200)
});

    You need to clear the active first, then add active class on the current tab.

    Login or Signup to reply.
  2. 0

    You can try closing all open tabs before opening the selected tab

    jQuery(document).ready(function($){
    jQuery(".toggle-trigger").on("click", function(){
        let $this = $(this);

        // close all open tabs except clicked
        $(".toggle-trigger").not($this).removeClass('tab_active');
        $(".toggle-content").not($this.next(".toggle-content")).slideUp(200);

        // toggle clicked tab
        if($this.hasClass('tab_active')){
            $this.removeClass('tab_active');
            $this.next(".toggle-content").slideUp(200);
        } else {
            $this.addClass('tab_active');
            $this.next(".toggle-content").slideDown(200);
        }
    });
});

    Also, when the accordion is opened, the position of the tab moves a
    bit up and the content slides down, how should I change it so that the
    position of the tab is fixed and only the content slides down?

    You could try adding a CSS position: relative to the parent element of the tab. This will fix the position of the tab relative to its parent while the content slides down below it

    .parent element {
   position: relative;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search