CODEWITHSUNDEEP
twitter-bootstrap
Andrew Newby
Andrew Newby

Reputation: 5206

Bootstrap 3, open Collapse element on hover

I'm trying to convert some code from Bootstrap 2 to Bootstrap 3:

$(document).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)
});

It looks like they changed quite a bit of stuff around from v2 > v3,so I'm at a bit of a loss as to what to change. I found a thread that kinda deals with it, but doesn't actually do what I'm after:

Bootstrap Collapse accordion on hover

Basically I need to have x elements in the Collapse. When you hover over one of them, it will open it up (instead of having to click it). Then when you move over another one, it will close the others and open the new one.

Thanks for any suggestions!

Upvotes: 4

Views: 3727

Answers (1)

john Smith
john Smith

Reputation: 17936

i edited the script as followed to put it to work 

$(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]+$)/, '')
            ,
            option = $(target).hasClass('in') ? 'hide' : "show";
            $('.panel-collapse').not(target).collapse("hide");
            $(target).collapse(option);
    })
});

Upvotes: 3

Related Questions