Question 299067 in Elementor Question posted in
A comprehensive tutorial library can be found here.

Toggles not opening in Elementor – WordPress

I’m trying to use a script to make only one toggle open at a time on a website page built with Elementor. I am using three toggle widgets in different places on the same page.

I have tried adding the script in different locations and also tried to test it with different browsers but no luck. The script runs without any error but none of the toggles are opening. I already did all the steps of checking the script location, browser developer console and jQuery loading and I also tried to switch to a default WordPress theme. The problem persists.

My script is as follows:

<script>
jQuery(document).ready(function($) {
    $('.elementor-tab-title').on('click', function() {
        $('.elementor-tab-title').not(this).removeClass('elementor-active')
                                            .attr('aria-expanded', 'false')
                                            .attr('tabindex', '-1')
                                            .attr('aria-selected', 'false');
                                            
        $(this).addClass('elementor-active')
               .attr('aria-expanded', 'true')
               .attr('tabindex', '0')
               .attr('aria-selected', 'true');
    });
});
</script>

It is important to note that in this particular case, I am not using the accordion widget that is provided by Elementor, since it has the first element opened by default on page load.

Tags:

2

Answers


  1. 0

    Essential Addons for Elementor plugin has an accordion widget that keeps all accordions closed. You could try that and disable all the other widgets if don’t need them.

    Login or Signup to reply.
  2. 0

    try this instead

    $('.elementor-accordion-item').click(function() {
    var $tabContent = $(this).find('.elementor-tab-content');
    
    // If the clicked tab content is visible, slide it up; otherwise, slide up all visible tab contents
    if ($tabContent.is(':visible')) {
        $tabContent.slideUp();
    } else {
        // Hide all visible .elementor-tab-content and slide down the clicked one
        $('.elementor-tab-content').not($tabContent).slideUp();
        $tabContent.slideDown();
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search