Wordpress Elementor: Expand/Collapse on hover on accordion

Question

I am using wordpress with the elementor add on. Though it provides very sleak accordion which works perfectly on click, I wanted to expand/collapse the accordion on hover. Used the below JQuery which works but not as clean as the click as it is using CSS so there is no animation/slow loading of the accordion. Pretty new to JS but can someone help me to replicate the "animation/slow loading" as happens on click of the accordion element?

Working JQuery which does not expand/collapse nicely:

(function($){

  $('.elementor-tab-title').hover(function(){
    $(this).addClass("elementor-active", 10000 );
     $(this).parent().find('.elementor-tab-content').addClass("elementor-active", 10000 );
     $(this).parent().find('.elementor-tab-content').css({"display": "block"});
  }, function(){
    $(this).removeClass("elementor-active", 10000 );
    $(this).parent().find('.elementor-tab-content').removeClass("elementor-active",10000 );
    $(this).parent().find('.elementor-tab-content').css({"display": "none"});
  });

})(jQuery);

Answer 1

Try this jQuery

jQuery(document).ready(function($){ 
    
    $(".elementor-tab-content").fadeOut(0);
     $(".elementor-tab-title").hover(function() {
          $(".elementor-tab-content").not($(this).next()).slideUp('slow');
          $(this).next().slideToggle(400);
     });
    
});

Or another, this one expands on mouse over and can only be collapsed with a click

jQuery(document).ready(function($){ 
     $('.elementor-tab-title').mouseover(function(){
    $(this).addClass("elementor-active", 10000 );
     $(this).parent().find('.elementor-tab-content').addClass("elementor-active", 10000 );
     $(this).parent().find('.elementor-tab-content').stop().slideDown("fast");

  });
});