Question 11005 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Bootstrap vertical tabs show content on mouseover – Jquery

I have created some tabs in bootstrap and i would like to display the tabs onmouseover

This are the tabs https://jsfiddle.net/uzfxmrs3/

This is the html

<div class="d-flex align-items-start responsive-tab-menu">

        <ul class="nav flex-column nav-pills nav-tabs-dropdown me-3" id="v-pills-tab" role="tablist"
            aria-orientation="vertical">
            <li class="nav-item">
                <a class="nav-link text-start active" href="#" id="v-pills-home-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-start" href="#" id="v-pills-profile-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
                    aria-selected="false">Profile</a>
            </li>
        </ul>

        <div class="tab-content responsive-tab-content" id="v-pills-tabContent" style="border:1px solid #708090; width:600px;height:200px;">
            <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"
                tabindex="0">home content</div>
            <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"
                tabindex="0">profile content</div>

        </div>
    </div>

and this is the jquery

$('.nav-tabs-dropdown')
            .on("mouseover", ".nav-link:not('.active')", function (event) {
                $(this).closest('ul').removeClass("open");
            })
            .on("mouseover", ".nav-link.active", function (event) {
                $(this).closest('ul').toggleClass("open");
            });

Currently the code only displays the content on click.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I made the vertical menus to only show on hover/mouseover like this

    https://jsfiddle.net/8jn240b5/

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    $(document).ready(function() {
      $(".vertical-tabs a").mouseover(function() {
        // get the ID of the tab to show
        var tabId = $(this).data("tab");
        // hide all tab content
        $(".tab-pane").hide();
        // show the selected tab content
        $("#" + tabId).show();
        // add active class to selected tab link
        $(this).addClass("active");
      });
      $(".vertical-tabs a").mouseout(function() {
        // remove active class from all tab links
        $(".vertical-tabs a").removeClass("active");
        // hide all tab content
        $(".tab-pane").hide();
      });
    });
  </script>
  <div class="vertical-tabs col-3" style="margin-top:50px;z-index:1000">
    <ul class="">
      <li style="width:100px">
        <a href="#" data-tab="tab1">Tab 1</a>
      </li>
      <li style="width:100px">
        <a href="#" data-tab="tab2">Tab 2</a>
      </li>
      <li style="width:100px">
        <a href="#" data-tab="tab3">Tab 3</a>
      </li>
    </ul>
    <div class="tab-content" style="margin-top:-16%;z-index:1000;margin-left:13%;">
      <div id="tab1" class="tab-pane" style="min-height:300px !important">Content for Tab 1</div>
      <div id="tab2" class="tab-pane" style="min-height:300px !important">Content for Tab 2</div>
      <div id="tab3" class="tab-pane" style="min-height:300px !important">Content for Tab 3</div>
    </div>
  </div>
  <style>
    .vertical-tabs {
      display: flex;
      flex-direction: column;
    }

    .vertical-tabs ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .vertical-tabs li {
      margin: 0;
      padding: 0;
    }

    .vertical-tabs a {
      display: block;
      padding: 10px;
      background-color: #eee;
      color: #333;
      text-decoration: none;
      border: 1px solid #ccc;
    }

    .vertical-tabs a.active {
      background-color: #ccc;
    }

    .tab-content {
      margin-top: 10px;
    }

    .tab-pane {
      display: inline-block;
      width: 600px;
      background-color: white;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>

  2. 0

    You can change your jQuery to something like this:

    • Add $(this).tab('show'); as follows:

      $('.nav-tabs-dropdown')
  .on("mouseenter", ".nav-link:not('.active')", function (event) {
    $(this).closest('ul').removeClass("open");
    $(this).tab('show');
  })
  .on("mouseenter", ".nav-link.active", function (event) {
    $(this).closest('ul').toggleClass("open");
  });
    Login or Signup to reply.
  3. 0

    Replace your javascript code with this:

    $(".nav-item .nav-link").on("mouseover", function(){
    const target = $(this).attr("aria-controls")
  $(".nav-link").removeClass("active");
  $(this).addClass("active");
  
  $(".tab-pane.fade").removeClass("active show")
  $(`#${target}`).addClass("active show")
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search