Bootstrap 4: Open a tab inside a tab (second link)

Question

I use the Bootstra 4 boot tab as follows:

<nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <a href="">LINK TO THIRD TAB</a> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> </div> 

Now I want to use the link in the content pane of the first tab to open the third link pane from outside the first pane.

If I use the link from the tab navigation (with data attribute), it does not work. Is there a way to open a tab with a second link?

Answer 1

The solution below is based on what you have already seen in my cited answer , but this extends to this with the scroll function, which you also want to include.

Essentially, scrolling can be easily achieved using the built-in Element.scrollIntoView() javascript method.

Note. In the example, I put some fields on the tabs to better demonstrate the functionality.

 $('.tab-link').on('click', function(event) { // Prevent url change event.preventDefault(); // `this` is the clicked <a> tag var target = $('[data-toggle="tab"][href="' + this.hash + '"]'); // opening tab target.trigger('click'); // scrolling into view target[0].scrollIntoView(true); }); 

 #nav { margin-top: 90vh; } #nav-tabContent { margin-bottom: 90vh; } 

 <nav id="nav"> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <a class="tab-link" href="#nav-contact">LINK TO THIRD TAB</a> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> </div> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>