javascript - How to make accordion partially expand on hover and then fully open on click?

Question

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.com/accordion/

I would like to be able to control the height the accordion opens on hover and then for it to open fully on click.

Thank you in advanced for any help provided.

Answer 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;}