Twitter bootstrap - Bootstrap Togglable tabs. How can I show the .tab-pane content when I hover over the `.nav-tabs > li`, then hide the content when the mouse leaves?

RamiroSalinas
June 17, 2015
161 views
1 vote
2 Answers

I have togglable tabs using Twitter Bootstrap. My problem is that my .tab-content is hidden and I want to show it when the mouse pointer enters the .nav-tabs > li and hide it when the mouse pointer leaves the elements.

Here is my code:

      <div role="tabpanel" class="tabpanel">
          <div class="container">
            <!-- company tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation">
                <a href="#sigma" aria-controls="sigma" role="tab" data-toggle="tab" class="boxopacity">
                  <span>TAb1</span>
                </a>
              </li>
              <li role="presentation">
              <a href="#alpek" aria-controls="alpek" role="tab" data-toggle="tab" class="boxopacity">
                  <span>TAb2</span>
                </a>
              </li>
              <li role="presentation">
                <a href="#nemak" aria-controls="nemak" role="tab" data-toggle="tab" class="boxopacity">
                  <span>TAb3</span>
                </a>
              </li>
            </ul><!-- .end company tabs -->

            <!-- company information -->
            <div class="tab-content">
              <!-- company sigma -->
              <div role="tabpanel" class="tab-pane fade" id="sigma">
                <div class="box largebox">
                  <div class="content">
                    <h5>Tab1</h5>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Productos principales</h6>

                    <h6>Mercados</h6>
                    <ul>
                      <li>Alimentos</li>
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Cifras relevantes</h6>
                    <ul class="relevant">
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                </div>
              </div>

              <!-- company alpek -->
              <div role="tabpanel" class="tab-pane fade" id="alpek">
                <div class="box largebox">
                  <div class="content">
                    <h5>Tab2</h5>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Productos principales</h6>

                    <h6>Mercados</h6>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Cifras relevantes</h6>
                    <ul class="relevant">
                      <li>Plantas</li>
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                </div>
              </div>

              <!-- company nemak -->
              <div role="tabpanel" class="tab-pane fade" id="nemak">
                <div class="box largebox">
                  <div class="content">
                    <h5>Tab3</h5>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Productos principales</h6>

                    <h6>Mercados</h6>
                    <ul>
                      <li>Automortiz.</li>
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Cifras relevantes</h6>
                    <ul class="relevant">
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                </div>
              </div>
            </div><!-- .end company information -->
          </div>
        </div>

My Jquery:

<script>
    $(document).ready(function (){
      $('.nav-tabs > li > a').hover(function () {
        $(this).tab('show');
        }, function () {
      });        
    });
  </script>

Answers

- davbuc
- June 17, 2015 at 6:25 pm
- 0 votes
0
You can do it with mouseenter & mouseleave like this fiddle I’ve just created:

http://jsfiddle.net/jep0n6p9/3/

jQuery
```
$( '.nav-tabs' ).mouseenter( handlerIn );
$( '.tab-content' ).mouseleave( handlerOut );

function handlerIn() {
    $('.tab-content').show();
}

function handlerOut() {
    $('.tab-content').hide();
}
```
Login or Signup to reply.

- ShivaliPatel
- June 17, 2015 at 6:58 pm
- 0 votes
0
Please use mouseleave event on nav-tab to hide content of tabs.

Please check this link : http://jsfiddle.net/yLq1df22/

Hope this might be helpful to you.

Login or Signup to reply.