jquerywordpresselementor

How to change title when toggle is active in Elementor Page Builder


Not active:

<div id="elementor-tab-title-1971" class="elementor-tab-title" data-tab="1" role="tab" aria-controls="elementor-tab-content-1971" aria-expanded="false" tabindex="-1" aria-selected="false"><a href="" class="elementor-toggle-title">Lees meer</a></div>

Active:

<div id="elementor-tab-title-1971" class="elementor-tab-title elementor-active" data-tab="1" role="tab" aria-controls="elementor-tab-content-1971" aria-expanded="true" tabindex="0" aria-selected="true">
                                                <a href="" class="elementor-toggle-title">Read Less</a>
                    </div>

I want to change the title when the Toggle is active. How can I do this with jQuery?

I'm trying to do this with jQuery. but I couldn't do it.


Solution

  • You can do it like this.

    jQuery(function($){
        
        /* To handle after page load*/
        if($(".elementor-tab-title").hasClass("elementor-active")){
            $(".elementor-tab-title").find("a.elementor-toggle-title").text("active text");
        }
        else{
            $(".elementor-tab-title").find("a.elementor-toggle-title").text("Inactive text");
        }
    
        /* To handle on element change*/
        $(".elementor-tab-title").on('change, click', function( e ){
            e.preventDefault();
            
            if($(this).hasClass("elementor-active")){
                $(this).find("a.elementor-toggle-title").text("active text");
            }
            else{
                $(this).find("a.elementor-toggle-title").text("Inactive text");
            }
        });
    });