Vertical tabs in Bootstrap display content when hovered over

I have implemented some tabs using Bootstrap and I want to show these tabs when hovering over them.

Here is the link to view the tabs: https://jsfiddle.net/uzfxmrs3/

Below is the HTML code for the tabs:

<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>

Additionally, here is the jQuery code:

$('.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 tabs display their content only when clicked on.

htmljquerycsstwitter-bootstrapbootstrap-5

Answer №1

My approach was to create vertical menus that only appear when hovering or mousing over, similar to 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>

Answer №2

To update your jQuery code, consider making the following adjustments:

  • Include $(this).tab('show'); in the revised script:

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

Answer №3

Here is a snippet of code to replace your javascript:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Css shaky letters transformation

[SOLUTION] To resolve this issue, you can utilize the will-change CSS property that enforces GPU rendering: will-change: transform; [ORIGINAL QUESTION] After extensive searching on the internet, I have yet to find a solution to a seemingly simple prob ...

javascriptcsstransformjittertranslate3d

The color of the last clicked DIV is supposed to stay permanent, but for some unknown reason

I'm attempting to replicate this design in my project: http://jsfiddle.net/AYRh6/26/ However, I am facing issues with it and cannot pinpoint the exact problem in the code. I am using code for a toggle effect. Any assistance would be greatly appreciat ...

javascriptjqueryhtmlcss

What is preventing Kohana from reading my CSS?

Recently, I launched my website kipclip.com on the Kohana platform and added a new rental page. However, the CSS and JS files are not being applied to this page. I've looked into how these files are included in Kohana but haven't had any luck so ...

phpcsskohana

Refresh shopping cart information using AJAX in WooCommerce

Attempting to implement an AJAX update for the shipping details in my checkout cart... I have set up the necessary function in functions.php function custom_update_shipping() { WC()->cart->calculate_shipping(); echo "hello"; die(); } a ...

phpjqueryajaxwoocommercecheckout

Overlay displayed on top of a single div element

Trying to implement a loading overlay in an Angular project within a specific div rather than covering the entire page. Here's a Fiddle illustrating my current progress: #loader-wrapper { top: 0; left: 0; width: 100%; height: 100%; ...

htmlcss

HTML embedded content is not appearing on the React webpage

I'm attempting to incorporate GoFundMe donation buttons into a React page, but unfortunately, they aren't displaying on the screen. const Donation = () => { return ( <div> <div className="gfm-embed" d ...

javascripthtmlreactjs

Ensuring divs are centered when resizing the page

Is there a way to center an unordered list of tables while ensuring that it remains centered even when the window is resized? The list should move each table to a new line if they can no longer fit. Check out the code snippet below for reference: <d ...

htmlcss

Dealing with unreadable strings when formatting dates in a JSP

When working on a JSP project, I encountered a situation where I needed to format a Java Date retrieved from the request. My current approach looks like this: <fmt:formatDate value="${attribute.value}" pattern="yyyy-MM-dd HH:mm:ss"/> This method wo ...

javahtmljspjstl

ajax-jquery request declined

I have a jquery-ajax function that is being called multiple times with different IP addresses each time. This function makes a call to an action in the mvc4 controller responsible for executing a ping and returning the results. After analyzing the request ...

javascriptajaxjquery

Issues with jQuery Ajax

Hello all, I've come across this snippet of jquery code: <script type="text/javascript" > $(function() { $(".submitButton").click(function() { var post = $("#post").val(); var dataString = 'post='+ ...

phpjqueryajax

Adding a Bootstrap carousel to an HTML page may cause the inner items to inexplic

I have been working on creating a User Projects section, and I wanted to display the projects in a carousel format. However, when I tried to import Bootstrap carousels, my items suddenly disappeared. Since I am coding on a tablet and not a computer, I am n ...

javascripthtmlcss

The color is missing in the custom button of Bootstrap v5.2

Trying to incorporate a unique button class in Bootstrap with an iris-purple color. Utilized Sass for creating the custom button: @import "../node_modules/bootstrap/scss/bootstrap"; $mynewcolor:#5D3FD3; .btn-purple { @include button-variant( ...

htmlcssbootstrap-5

Document ready not functioning properly for redirects

My code below seems to have an issue as it is not directing to the link specified. <html> <head> <script type="text/javascript" src="<?= baseurl(); ?>/public/js/jquery-1.9.1.min.js"></script> <script type=" ...

javascriptphphtmlajax

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...

javascripthtmlcsstwitter-bootstrap

Hover background color not being applied to child elements within Button element in Firefox

Ensuring that my product is SEO-friendly, I incorporated semantic markup using the button element and schema attributes. To separate individual items, I utilized "span" elements while setting hover effects on selected items by adding display:block. This a ...

htmlcssbuttonhover

unusual behavior observed in addEventListener

I have recently delved into learning about the DOM. I have a project in mind where I want to create a website with buttons that, when clicked, play different drum sounds. As part of my experimentation with JavaScript, I wanted to explore the this keyword. ...

javascripthtmljqueryevent-handling

Develop an HTML table using either JSON or jQuery in Javascript

JavaScript is a bit of a mystery to me right now - I could really use some assistance in overcoming this obstacle that has me pulling my hair out! I'm struggling with constructing HTML code using JSON data. It's just not clicking for me at the m ...

javascriptjqueryjson

Flex items refusing to wrap in Firefox

I am facing an issue with my layout setup in different browsers. When I have a list of divs inside a flex div, it displays correctly in Chrome: However, in Firefox, it only shows a horizontal scroll with one line. Is there a way to prevent the forced hor ...

htmlcssflexbox

Countdown Clock in JavaScript for Automatic Logout

I am currently working on creating a countdown timer in JavaScript that should decrement the value of a field by one every minute (for example, starting at 20 and then changing to 19, 18, 17, and so on). However, I am facing issues with its functionality ...

javascriptjquerytimetimeout

Challenges with Media Queries post Integration of MUI Library in React

I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement ...

javascriptcssreactjsmaterial-ui