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.

How can I 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/