How to access a bootstrap 4 tab panel on a different page

How can I successfully open a specific tab panel on the service.html page when clicking a link on my index page? I'm using bootstrap nav-pills and have tried the following, which unfortunately did not work as expected:

service.html

<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li class="nav-item">
    <a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Support</a>
</li>
</div>

<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
    <h5>Manpower Support</h5>
</div>
</div>

This is the link in my index.html file

<a href="services.html#v-pills-manpower">Manpower</a>

Currently, this link only takes me to the default services page without opening the specific tab content. What is the correct way to make this functionality work as intended?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Insert the provided code snippet into your service.html file:

$(function(){
  var tabPanelId = window.location.hash.substr(1).trim();
  // The tabPanelId variable will contain the "v-pills-manpower" id
  $("#"+tabPanelId").click();
});

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

How can CSS Bootstrap flex width be used to prevent parent element from expanding too much with long, single line text? Utilizing ell

​Having encountered a tricky situation with CSS and flexbox, I found myself needing to implement the following properties: ​text-overflow: ellipsis; ​white-space: nowrap; ​overflow: hidden; However, when the text was too long, it caused t ...

htmlcssbootstrap-4flexboxwidth

Cannot get the "middle" div in CSS to properly wrap around its content

Click here to view the issue with the "middle" div not wrapping its content. I have been attempting to make it automatically wrap the entire content of the table, resulting in a neat white 10 pixel padded border surrounding it. Despite trying various metho ...

csshtml

jquery carousel slider dynamically append

I have been tasked with creating a dynamic carousel using jQuery AJAX, and my supervisor recommended that I utilize the .append() method. Below is the HTML code for my carousel: <div id="myCarousel"> </div> <div cla ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Is it possible for two overlapping Javascript divs to both be draggable at the same time?

I have multiple stacked div elements. The top one needs to be draggable, while the one beneath should remain clickable. An illustration is provided below for better understanding: The green div elements are contained within cells. Clicking on a cell trigg ...

javascripthtmlcss

Steps for placing a second pie chart alongside the initial one within a Bootstrap card

Is it possible to have two pie charts with different values using chart.js? I attempted to duplicate the script for the first chart to create a second one, but it did not display correctly. Why is the second pie chart not showing up? $(document).ready(fu ...

javascriptbootstrap-4chart.js

A convenient Delete Modal Component in React utilizing Reactstrap

I am currently working on implementing a reusable Delete Component using reactstrap, which can be called from other components. Below is the code for my DeleteModal: class DeleteModal extends Component { constructor(props) { super(props); this. ...

javascriptreactjstwitter-bootstrapreactstrap

Thickness of Border in Bootstrap Cards

I've been attempting to include a thicker border around the entirety of my Bootstrap 4 card. Despite specifying a thicker border, nothing seems to change. Below is a snippet of the code I'm working with: <div class="container"> <di ...

cssbootstrap-4

Position the typography component to the right side

Is there a way to align two typography components on the same line, with one aligned to the left and the other to the right? I'm currently using this code but the components are aligned next to each other on the left side. const customStyles = makeSt ...

javascriptcssreactjsalignmentmaterial-ui

Checking HTML and CSS validation when uploading files in Ruby on Rails

Currently, the project I am working on enables users to upload HTML templates along with CSS, which are then processed by the application for a variety of tasks. While the uploading process is functioning properly, I am in search of a method to validate th ...

htmlcssruby-on-railsvalidation

Guidelines for inputting a value into a JavaScript list and choosing a specific item within the list

When it comes to studying Selenium Web, I rely on the website. My current challenge involves inputting 'Ottawa' into the location control and then selecting 'Ottawa, ON'. WebElement el = driver.findElement( By.xpath("//*[contains( ...

javascripthtmlselenium-webdriver

Web Page Content Scrambling/Character Exchange

I've encountered a perplexing issue that seems to strike randomly, yet I've managed to replicate the problem on three different desktops. Oddly enough, some other desktops never experience this issue and I'm at a loss as to what could be cau ...

javascriptphphtmlgoogle-chrome

CSS - Implementing Below Element Validation Message in MVC 3

Hello everyone, Currently, I am looking for a way to show input validation messages below the element instead of beside it. The default CSS file adds a margin-bottom of 19px to the <input /> element, so I need to adjust this positioning in order to ...

cssasp.net-mvc-3

Ways to restrict a function to a single DOM element using either its id or class

This script is responsible for dynamically loading pages on my website. It works fine, except that it currently iterates over all anchor tags a on the site, whereas I want it to iterate only through my navigation menu. Here is the navigation menu: <div ...

javascriptjqueryhtmlajax

Placing two images within one div tag

I've been attempting to place two images within a single div, but they're not appearing how I intended. I'd like there to be some space between the images, but that's not happening. Here's the CSS I'm using: .sidebarBody { ...

htmlcssimage

Node JS server fails to load CSS even with the use of express.static

It's quite absurd, but I've been grappling with a rather nonsensical code conundrum for days now. I just can't seem to get the CSS and image to load on my Node.js server. I've tried various solutions (like express.static, etc.), but n ...

cssnode.jsexpressstatic-files

Collection of components displayed in a row - Bootstrap 4

In order to meet the requirement, the label must be positioned above the input element, and the group consisting of each label and input element should be displayed inline with one another. I have managed to achieve this using the following code snippet, ...

javascriptjqueryhtmlcssbootstrap-4

Incorporating Node.JS variables within an HTML document

After building a simple site using Express, I discovered that Node.js variables can also be used with Jade. exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; This is the code for the index file: ext ...

javascripthtmlnode.js

Centering a dynamic icon within the grid placement

Is there a way to center an icon on a page within a responsive grid layout with multiple items? I have tried using absolute positioning for the icon but it seems to be taking into account the entire screen's range of motion instead of just staying wit ...

htmlcss

PHP function that includes an if statement in its returned value

Having a function that determines a user's role is functioning correctly within the HTML document. However, when multiple functions are involved in connecting to a database and displaying information, I encounter issues with granting access to certain ...

phphtmlfunctionif-statementreturn

CSS Layout - Float: What's floating to the top?

Are there any CSS techniques available to make floated blocks fill in both upwards and in their float direction? For example - https://i.sstatic.net/uo06B.png Instead of - https://i.sstatic.net/oEijA.png I know this can be achieved using JavaScript li ...

csslayoutcss-float