CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
WebDesigner
WebDesigner

Reputation: 63

Open Collapse Tab in Hover in Bootstrap

I am having Collapse Panel in Bootstrap which is opening on a click on the title of the tab. I am trying to figure out to open using the hover of the mouse on the total width of the tab but I am not getting it. Below is the code of the single tab which is close by default.

<div class="panel panel-default" style="background-color:#039;"> 
    <div class="panel-heading" style="background-color:#039;">
         <a  class="nodecoration panel-title lead" data-toggle="collapse" data-parent="#panel-814345" href="#panel-element-566205">Software Development</a>
    </div>
    <div id="panel-element-566205" class="panel-collapse collapse" style="background-color:#039; color:#fff;">
        <div class="panel-body" style="border:none; font-size:14px; padding-bottom:0; margin-bottom:0;">
            We work for almost all web based application, database-driven systems, mapping and geo-spatial applications, and large content managed websites
            <br /><br /><p style="font-style:italic; font-weight:700;">Find out more</p>
        </div>
    </div>
</div>

If we change the css class from class="panel-collapse collapse" to class="panel-collapse collapse in" then the tab is open. Could you please let me know how to achieve this.

I GOT THE ANSWER BUT WORKING ONLY BY HOVER ON THE TITLE NOT ON THE TOTAL WIDTH OF THE TAB. THE CODES ARE BELOW

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

Can we make this to work by hover on the full width ??

Upvotes: 6

Views: 29375

Answers (2)

Shehary
Shehary

Reputation: 9992

You can achieve this with hover function

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

But it will close the panel as soon as mouse leaves the title header

Fiddle with hover

Alternate solution is mouseenter function

$(".panel-heading").mouseenter(function () {
        $(".panel-collapse").fadeIn();
    });
 $(".panel-collapse").mouseleave(function(){
       $(".panel-collapse").fadeOut();
});

With this the panel only close when mouse leaves the panel body.

Fiddle with mouseenter

Upvotes: 10

Alex Kobzin
Alex Kobzin

Reputation: 69

You can combine js hover event and collapse bootstrap methods as events too. If i understood your question correctly.

Upvotes: 0

Related Questions