automating the creation of vertical nav-pills in Bootstrap

Is there a way to automatically create vertical nav-pills in Bootstrap 4 using JavaScript or jQuery?

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

To create an automated panel selection system, similar to a slider or image gallery, you will need to simulate clicks on each tab link.

Here are the basic steps:

  • Add a marker in the HTML code indicating that this is a "tab slider," such as a data- attribute.
  • Iterate through the tabs and set up each tab slider individually. For each tab slider:
    • Retrieve references to each tab.
    • Calculate the number of tabs - which will be used with the Modulo operator (%1) and an incrementor variable to determine which panel should be displayed next.
    • Create a function that can be called repeatedly using setTimeout, which will automatically switch to the next panel by triggering a click event on a tab.

$( '[data-widget="tab-slider"]' ).each( function ( i, el ) {

  const $container   = $( this );
  const $sliderLinks = $container.find( '.nav-link' );
  const panelCount   = $sliderLinks.length;
  const delay        = 3000; // milliseconds
  let   index        = 0;

  function nextTabSliderPanel() {

    $sliderLinks.eq( index++ % panelCount ).trigger( 'click' );
    setTimeout( nextTabSliderPanel, delay );

  }
  
  nextTabSliderPanel(); // Start the slider.

} );
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="row" data-widget="tab-slider">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">Home Panel</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">Profile Panel</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">Messages Panel</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">Settings Panel</div>
    </div>
  </div>
</div>

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

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

I'm having trouble phrasing this question differently, but I am seeking assistance in comprehending how to address this issue. The error message I am encountering is as follows: TypeError: _co.create is not a function TypeError: Cannot read property ...

htmlangulartypescript

Click events registered using JQuery's .on() method are not functioning

After clicking on the link, I want to add HTML content following the element that has the class jstore-js-detailLink. However, my current method doesn't appear to be functioning: <a href="" class="jstore-js-detailLink">hello</a> <div ...

javascriptjqueryhtmlonclick

NodeJS is constantly refreshing the data in the database table

Every day, I use a cron job to scrape data and insert it into a database. However, I'm facing an issue where the database results on the server do not refresh themselves after new data is inserted. I've come across 2 solutions here, but one was ...

javascriptmysqlnode.jsexpresscron

To use Material-UI Tooltip, the child title prop must be removed

I am facing an issue while trying to implement the Material-UI Tooltip component on a component that already has the title property. I need to use the child with the title prop, but I'm unsure if it's possible to combine both or if I should look ...

javascriptreactjsmaterial-ui

The hierarchy of CSS in Vue components

I've developed a customized CSS framework to streamline the design process across all my internal projects. The central file is structured as shown below: @import "~normalize.css/normalize.css"; @import "_variables.scss"; @import "_mixins.scss" ...

htmlcssvue.js

IE 10 users may encounter issues when trying to use Flexbox

Hello, I am currently working with a flexbox grid for a gallery layout. The goal is to have the first division occupy two columns and maintain responsiveness across different devices. Everything is functioning as intended except in IE10, where the flexbox ...

htmlcssflexbox

How can you transfer values from one set of key/value pairs to keys of another?

I am currently dealing with the outputs of a system within my organization that I do not have control over. Here is a sample string: let structure = 'LAWYER=|FIRM=|SUIT_DESCRIPTION=|DEF_COMMENT=|PLF_COMMENT=|'; This string continues on, but fol ...

javascriptarrays

AngularJS: Trouble with chain calling HTTP requests and NodeJS: Struggle with utilizing a variable across multiple HTTP calls

In my node.js file, I have both a get call and a post call that utilize the same variable initialized as an empty string outside of these calls. The post call sets the variable while the get call returns the value of the variable to the clientside angularj ...

javascriptangularjsnode.jshttpvariables

Checking if a Vector3 is visible within a camera's field of view using three.js

Is there a simple and cost-effective way to determine if a point or Vector3 is within the field of view of a camera using three.js? I would like to create a grid of boxes to cover the "floor" of a scene, but only up to the edges of the visible area, witho ...

javascriptcamerathree.js

What could be the reason that I am unable to absolutely position generated content in Firefox?

I am currently designing a horizontal navigation bar and here is the CSS I have used: #topnav { clear: both; overflow: hidden; display: table; } #topnav ul { display: table-row; } #topnav ul li { display: table-cell; vertical-ali ...

cssfirefoxcss-selectors

Checking with Protractor to see if the modal is displayed

I am currently working on a Protractor test to check if a bootstrap modal window that confirms the deletion of a record is visible at this time. The record that needs to be deleted is displayed in an angular ng-repeat, so I have to trigger the delete butt ...

javascriptangularjstwitter-bootstrapprotractor

Trigger an AJAX request by clicking on a specific div element

My goal is to trigger an AJAX call when a user clicks on a location marker in a Google map integration. The function info_window_content, available at this link: http://jsfiddle.net/6xw2y/, is responsible for creating the necessary div elements within the ...

javascriptjqueryajax

Shifting of SVG coordinates

My challenge involves fitting an svg into a div. The svg consists of a single path. Even though I have correctly set up the viewBox and preserveAspectRatio, part of the path is drawn outside the expected boundaries. You can find the fiddle here, and below ...

htmlcsssvgpathpadding

Implement interactive fields to fetch user data and store in MySQL database

I am currently working on a form that contains various input fields and a button to dynamically add more rows of data underneath. The goal is to display this information on a page titled "f.php" without inserting it into the database just yet. However, I a ...

phpjquerymysqldynamic

What purpose does "Phaser.Display.Align.In.Center" serve when we already have the function `setOrigin` available?

I'm puzzled about the purpose of Phaser.Display.Align.In.Center. The code snippet below is taken from an official example class Example extends Phaser.Scene { constructor () { super(); } preload() { this.load.path = 'https:// ...

javascriptphaser-framework

Text breaks down as it stretches past a certain length

Implementing a manual line break resolves the issue, however, without it, everything becomes jumbled together. Here is the CSS code being used: header { background: #fcb9aa; color: #f3d9d9; height:100px; margin: 0; padding: 0; posi ...

htmlcss

Can the font size of a container be adjusted proportionally to its width or height using only CSS?

When it comes to ensuring that the font always fits nicely within its container, I rely on using Javascript to set divs or specific class to have their font-size dynamically equal to their width, and adjust their inner text elements accordingly. If you wa ...

htmltwitter-bootstrapcssresponsive-design

Tips for Utilizing Bootstrap to Create a Responsive ASP GridView

I am facing an issue with utilizing bootstrap to develop a responsive GridView. I came across an illustration on , but the main challenge is how to assign md, xs, sm, lg css classes for gridview columns with varying widths, Is there a practical approach ...

asp.netgridviewbootstrap-4

Most effective method to remove an element from an array without causing any reordering

When I need to remove elements from my array, is there a way to do so without rearranging the entire array? If I use the "delete" method to remove elements, will it create empty spaces in memory? var array=["A","B","C"]; delete array[1]; // array -> ...

javascriptarrays

CSS active state not functioning properly

While working with asp.net4.0, I am attempting to create a menu bar using CSS. Everything seems to be working fine except for the 'active' code, which doesn't seem to be responding as expected. Any insights into why this might be happening? ...

css