Bootstrap Collapse accordion on hover

Question

I\'m using Twitter\'s Bootstrap \'Collapse\' plug-in in a project I am working on. I have a simple accordion (setup as per the documentation), but I want to amend the defaul

Answer 1

Based on Cliff Seal's answer I suggest queueing animations to prevent panel-collapse from staying open when mouseleave occurs before the collapse('show') animation is finished.

$('div.panel-collapse').on('shown.bs.collapse hidden.bs.collapse', function() {
  $(this).dequeue('collapse');
});
$('div.panel-heading').hover(
  function() {
    var collapse = $($(this).find('a').attr('href'));
    collapse.queue('collapse', function() {
      $(this).collapse('show');
    });
    if (!collapse.hasClass('collapsing')) {
      collapse.dequeue('collapse');
    }
  },
  function() {
    var collapse = $($(this).find('a').attr('href'));
    collapse.queue('collapse', function() {
      $(this).collapse('hide');
    });
    if (!collapse.hasClass('collapsing')) {
      collapse.dequeue('collapse');
    }
  }
}

This doesn't make use of DRY coding, but I encountered hoverevents onloadwhen using a named function. Maybe someone can advise on this?