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