Bootstrap 3 Collapse On Hover

I'm working on this site here. http://opennetsummit.wpengine.com/ The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to sho

Solution 1:

You can use jquery's hover along with bootstrap's collapse javascript, something like this:

$(".panel-tabs").hover(
 function() {
    $('#collapsePanel3').collapse('show');
  }, function() {
    $('#collapsePanel3').collapse('hide');
  }
);

The first function(){} is for when the mouse enters, the second for when it leaves.

More info here:

• http://api.jquery.com/hover/
• http://getbootstrap.com/javascript/#collapse-methods

Solution 2:

I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.

document.getElementById("panelid").className = "collapse in";