jQuery Accordion - hover trigger

Question

is there any way to open this accordion using class on hover? (eg ".accordion--hover" or data-on-hover)

I tried to add the .open class on hover and it didn't work for me.

Thanks for any solution.

https://vctrfrnndz.github.io/jquery-accordion/

<div data-accordion data-on-hover>
  <div data-control>Control</div>
  <div data-content>
    <div>Row</div>
    <div>Row</div>
    <div>Row</div>
  </div>
</div>

$('.accordion').accordion({
  "transitionSpeed": 400
});

Answer 1

If you are ok with custom solution, then go with it, or if you really want to go with the plugin solution then try firing open and close events of the accordion plugin mentioned in its documentation.

Events accordion.open fires when any accordion opens

accordion.close fires when any accordion closes

Fire open event on mouseEnter and fire close event on mouseLeave

find my custom solution below if this works for you

 $(document).ready(function(){ $('.accordionHeader').on('mouseenter',function(){ $(this).find('.accordionContent').slideDown(); }); $('.accordionHeader').on('mouseleave',function(){ $(this).find('.accordionContent').slideUp(); }); });

 .accordionContent { display: none; }.accordionWrapper {margin-bottom: 50px;}.accordionHeader {padding: 10px;border: 1px solid;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="accordionWrapper"> <div class="accordionHeader"> Hover Me <div class="accordionContent"> Content Go here <div>Row</div> <div>Row</div> <div>Row</div> </div> </div> </div> <div class="accordionWrapper"> <div class="accordionHeader"> Hover Me <div class="accordionContent"> Content Go here <div>Row</div> <div>Row</div> <div>Row</div> </div> </div> </div> <div class="accordionWrapper"> <div class="accordionHeader"> Hover Me <div class="accordionContent"> Content Go here <div>Row</div> <div>Row</div> <div>Row</div> </div> </div> </div>