Bootstrap Collapse Accordion Hover is not consistent

Question

I'm working on creating a accordion that collapses/opens when the user hover's their mouse over the title of the accordion. The code I have so far works to some degree. The problem is that the accordion always opens when the mouse enters but is sometimes really inconsistent in closing (especially if the user moves their mouse very fast).

Here is a link to the website http://infotree.co.uk/ (the accordion is on the left) to visualize the problem - move mouse fast over the left accordion.

And here is my code for just one of the accordion tabs in the html doc:

<div class="panel panel-default">
        <div class="panel-heading" role="tab">
          <h4 class="panel-title accordionTitles1" id="headOne1"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">Search</a></h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse in">
          <div class="panel-body">Search to find specific content to learn about.</div>
        </div>
</div>

And the java script to go with it:

$(document).ready(function() {
 $("#headOne1").hover(function() {
    $('#collapseOne1').collapse('show');
 }, function() {
    $('#collapseOne1').collapse('hide');
 }
 );
});   

Answer 1

This question has been answered before: Bootstrap Collapse accordion on hover

If you don't want/need the fancy animation, you could also use pure CSS: https://jsfiddle.net/vvu5ozh1/4/ With CSS transitions you could even do the animation, but that would be a bit more complicated.

<div class="panel">
<div class="title">
Title1
</div>
<div class="content">
COntent1
</div>
</div>

<div class="panel">
<div class="title">
Title2
</div>
<div class="content">
COntent2
</div>
</div>

.panel:hover .content {
  display:block;
}

.content {
  display: none;
}

Answer 2

Going through the previous accordion question you mentioned ( Bootstrap Collapse accordion on hover ) I found one person's answer relating to the problem I was having which made me realize the exact cause. The problem is to do with the animation timing, so if you leave the collapse area BEFORE the collapse animation is finish jquery never runs the collapse function. The solution is to use queue and dequeue methods to make sure all the functions run properly and in the correct order.

Here is the HTML code for one tab:

<div class="panel panel-default">
      <a href="http://www.google.com" class="sidebarButtons" id="sidebarButton1">Search</a>
      <div id="sidebarContent1" class="panel-collapse collapse">
        <div class="panel-body">Search to find specific content to learn about.</div>
      </div>
    </div>

And the java script for the respective tab:

$(document).ready(function() {
var button1 = $("#sidebarButton1");
var content1 = $("#sidebarContent1");
button1.mouseenter(function() {     
    content1.queue('collapsequeue',function(){
        content1.collapse('show');
    });
    if (!content1.hasClass("collapsing")) {
        content1.dequeue("collapsequeue");
    }
});
button1.mouseleave(function() { 
    content1.queue('collapsequeue',function(){
        content1.collapse('hide');
    });
    if (!content1.hasClass("collapsing")) {
        content1.dequeue("collapsequeue");
    }
});
content1.on("shown.bs.collapse hidden.bs.collapse", function(){
    content1.dequeue("collapsequeue");
});
});

The .queue() names a queue AS WELL as adds functions to a queue, .dequeue() simply RUNS the queue. The code isn't completely perfect as it goes against DRY coding (much like the response I found in Bootstrap Collapse accordion on hover ) - this is because I am not able to use the href tag in a element since I need that so that I can link to different webpages rather than the div element containing the hidden content.

Any idea on making the code shorter/efficient? I have to repeat the JS for every tab and I feel like there is probably a better way to do this that what I have come up with.