How To Make Accordion Partially Expand On Hover And Then Fully Open On Click?

Is it possible to make accordion partially expand and then fully open on click? I have been using the following accordion but I am struggling to get this to work. http://jqueryui.c

Solution 1:

Create the accordion first and then add the hover functionality. below code maybe helpful:

$('.ui-accordion-header').on('mouseenter',function(){

if(!($(this).next('.ui-accordion-content').css('display')=="block"))
{
    $(this).next('.ui-accordion-content').addClass('hover');
}
});

$('.ui-accordion-header').on('mouseleave',function(){
    $(this).next('.ui-accordion-content').removeClass('hover');
});

The .hover class may look something like this:

.hover{display:block !important; height:50px!important;}