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

Question

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.

Answer 1

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");
        }
    });
});