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 default functionality from on click to the on hover event.

Can anyone confirm the best way to achieve this?

Answer 1

You can copy the collapsible data-api straight from the plugins script and tweak it around to achieve the hover functionality. You can then place it inside your own script.js file and target the collapsible you want modified to open on hover instead of on click. Try this for example:

JS

$(function() {
    $('#accordion2').on('mouseenter.collapse.data-api', '[data-toggle=collapse]', function(e) {
        var $this = $(this),
            href, target = $this.attr('data-target') || e.preventDefault() || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
            ,
            option = $(target).data('collapse') ? 'show' : $this.data()
            $(target).collapse(option)
    })
})

This is a direct copy of the data-api block found on the plugin, i just replaced the click event with mouseenter and also the collapse option, changed it to show instead.

Demo: http://jsfiddle.net/um2q2/1/

Answer 2

I achieved hover functionality while maintaining 'clickability' fairly easily:

jQuery(".pointer").hover(
    function(){
        var thisdiv = jQuery(this).attr("data-target")
        jQuery(thisdiv).collapse("show");
    },
    function(){
        var thisdiv = jQuery(this).attr("data-target")
        jQuery(thisdiv).collapse("hide");
    }
);

I was already using the data-attributes, so I kept them, and used them here to trigger the right divs. "pointer" is a class on my toggle links, so you can adapt that to whatever you need.

Answer 3

1. Add the following script

   $( ".hoverExpand" ).hover(
       function() {
           if (! $(this).hasClass('collapsing') && 
               $(this).hasClass('collapsed')) {
                   $( this ).click();
           }
       }, function() {
           if  (! $(this).hasClass('collapsing') || 
                ! $(this).hasClass('collapsed')) {
                   $( this ).click();
           }
       }
   );
   

2. Add hoverExpand (or whatever you want to call it) to the element. See example below

   <a class="hoverExpand" data-toggle="collapse" data-parent="#accordion" 
      href="#collapseOne">A plane that flies below water</a>
   

Answer 4

to put it to work for bootstrap3 i made some changes

$(function() {
    $(document).on('mouseenter.collapse', '[data-toggle=collapse]', function(e) {
        var $this = $(this),
            href, 
            target = $this.attr('data-target') 
                     || e.preventDefault() 
                     || (href = $this.attr('href')) 
                     && href.replace(/.*(?=#[^\s]+$)/, ''), //strip for ie7
            option = $(target).hasClass('in') ? 'hide' : "show"

            $('.panel-collapse').not(target).collapse("hide")
            $(target).collapse(option);
    })
});

Answer 5

I'm a bit late to the party, but for future googlers, I came up with a much simpler way of doing this.

It's coffee script I'm afraid, but you should get the idea:

$(".your-hoverable-object-class").mouseenter (e) ->
$this = $(this)
link = $this.find("a") #(assumes you only have one link)
target = link.attr('data-target') || e.preventDefault() || (href = link.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') #strip for ie7
unless $(target).hasClass('in')
  link.trigger('click') #Here's the money shot - just trigger the default functionality

The rest of the code is setting up the variables - you might need to tweak this depending how you've set it up - and the last bit checks that the panel isn't already open before triggering the click again. Again - this works for my set up, but you can remove it if doesn't work for you.

Answer 6

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?

Answer 7

This is the simplest way to make that done on mouseover. Using plain javascript in angularJs.

Script

$scope.collapsePanel = function(variable) {
    if(document.getElementById(variable).className=="collapse in") {
        document.getElementById(variable).className="collapse";
        document.getElementById(variable).setAttribute("aria-expanded","false");
        } else {
            document.getElementById(variable).className="collapse in";  
            document.getElementById(variable).setAttribute("aria-expanded","true");
        }
}

HTML code

<div ng-repeat="entity in entities">
<div class="panel-heading" ng-mouseover="collapsePanel(entity)">
     //Give your contents here
</div> 
</div>

Note: change ng-mouseover with ng-click for making it work on click instead of mouseover