How to fix data-bs-target bootstrap version 5 not working?

Question

I'm trying to click on a button tab and allow it to open up my content but it will not work. I seem to have the right code but it's still not working. I want it to be able to open my content once I click the button tab. This is really confusing I think I have tried everything

<%per_sel = "false"
job_sel = "false"
per_link = "nav-link"
job_link = "nav-link"
per_class = "tab-pane fade"
job_class = "tab-pane fade"
per_dis = " disabled"
job_dis = " disabled"

if app_pg >=5 then
   per_sel     = "true"
   per_dis     = ""
end if    
if app_pg = 5 then
   per_class   = "tab-pane fade show active"
   per_link = "nav-link active"
end if
if app_pg >=6 then
   job_sel     = "true"
   job_dis     = ""
end if    
if app_pg = 6 then
   job_class   = "tab-pane fade show active"
   job_link = "nav-link active"
end if%>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demographics</title>
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/theme.css">
        <script src="assets/js/bootstrap.bundle.min.js" defer></script>
    </head>
    <body class="d-flex flex-column vh-100">
        <ul class="nav nav-pills nav-fill">
            <li class="nav-item">
               <button class="<%=per_link%>" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab"  aria-controls="personal" aria-selected="<%=per_sel%>" <%=per_dis%>>Personal</button>
            </li>
            <li class="nav-item">
              <button class="<%=job_link%>" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="<%=job_sel%>" <%=job_dis%>>Job</button>
            </li>
        </ul>
        <div class="tab-content" id="appTabContent">
           <div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
               <form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
            
                  <h2>Personal Information</h2>
                  <div class="row my-2 g-4">
                      <div class="col-12 col-md-5">
                          <label for="firstName" class="form-label">First Name</label>
                          <input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
                      </div>
                      <div class="col-12 col-md-5">
                          <label for="lastName" class="form-label">Last Name</label>
                          <input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
                      </div>
                  </div>
               </form>
           </div>
           <div class="<%=job_class%>" id="jobPanel" role="tabpanel" aria- 
             labelledby="job-tab">Job
           </div>
           <form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">

           </form>
       </div>


      <script src="assets/js/bootstrap.bundle.min.js"></script>
    </body>
  </html>

I'm on the Job screen in the image below and click the personal but it stays on the job screen.

Answer edited to your needs. Please edite your question to be specific as in comment. — bZezzz, Oct 22 '21 at 17:57
Is it Javascript ?! Where is your tag ? Where is your #jobPanel ? is you have no #jobPanel tab-pane it can't work. — bZezzz, Oct 22 '21 at 19:14
@UnknownCoder45 The code sample is incomplete you [have server-side code not surrounded with `<% %>` tags](https://stackoverflow.com/revisions/69680882/4) to denote it should be processed by the Classic ASP web application before returning the client HTML. — user692942, Oct 26 '21 at 15:05
Put your form into your tab-pane or it will break the Bootstrap tabs behavior, or give .tab-pane fade.. to your form. — bZezzz, Oct 26 '21 at 16:58
Your code IS WORKING, as is in snippet tool, so seems to be a Bootstrap problem, like it's not loaded... Tried to removing bootstrap defer ? Could you put something online ? So I'll take a look a your "real" problem. — bZezzz, Oct 26 '21 at 17:56

bZezzz · Answer 1 · 2021-10-26T17:07:26.760

You HTML doesnt respect the correct structure for HTML file as following:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<!-- YOUR CONTENT HERE -->

</body>
</html>

With bootstrap 5, your code seems to work perfectly if you put this

<ul class="nav nav-pills nav-fill">
      <li class="nav-item">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab"  aria-controls="personal" aria-selected="false">Personal</button>
      </li>
      <li class="nav-item">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
      </li>
  </ul>
  <div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
      <h2>Personal Information</h2>
      <div class="row my-2 g-4">
         <div class="col-12 col-md-5">
           <label for="firstName" class="form-label">First Name</label>
           <input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
         </div>
         <div class="col-12 col-md-5">
            <label for="lastName" class="form-label">Last Name</label>
            <input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
         </div>
      </div>
   </div>

into a <body> tag take a look at the correct structure for HTML document here

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
  </li>
</ul>
<div class="tab-pane fade active show " id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
  <h2>Personal Information</h2>
  <div class="row my-2 g-4">
    <div class="col-12 col-md-5">
      <label for="firstName" class="form-label">First Name</label>
      <input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
    </div>
    <div class="col-12 col-md-5">
      <label for="lastName" class="form-label">Last Name</label>
      <input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
    </div>
  </div>
</div>
<div class="tab-pane fade" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
  job
</div>

If you want to show specific tab on load, simply add active show classes to a tab-pane fade element.

<div class="tab-pane fade active show" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">

And to be perfect you can add active class to nav-link element correponding to your tab-pane

<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>

EDIT: You must respect the bootstrap structure to get it working

Your .tap-pane MUST be children of .tab-content so you structure MUST look like that:

.tab-content > .tab-pane > form

OR

.tab-content > form.tab-pane

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
  </li>
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
  </li>
</ul>
<!-- tab-content PARENT OF .tab-pane -->
<div class="tab-content">
  <!-- tab-pane CHILDREN OF .tab-content -->
  <div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
    <h2>Personal Information</h2>
    <!-- form CHILDREN of .tab-pane -->
    <form>Your form here</form>
  </div>
  <div class="tab-pane fade active show" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
    <h2>Job</h2>
    <form>Your form here</form>
  </div>
</div>

Add active class to nav-link and active show classes to tab-pane — bZezzz, Oct 22 '21 at 17:53
Put your corrected code on your question. We will see the problem — bZezzz, Oct 22 '21 at 18:57
@UnknownCoder45 can you explain why this doesn't help, from what I can see it's a fully working demo. — user692942, Oct 26 '21 at 16:21
@user692942 everything he have I have. And it still don't work. — UnknownCoder45, Oct 26 '21 at 16:28
@UnknownCoder45 Just look at how bZezzz has structured their HTML and try to replicate it and identify where your code is lacking. It clearly works in the snippet above, so you don't have ["everything he have"](https://stackoverflow.com/questions/69680882/how-to-fix-data-bs-target-bootstrap-version-5-not-working#comment123248773_69681050). — user692942, Oct 26 '21 at 18:16
@UnknownCoder45 not at all, it's just the solution works. So if you are having problems remove the Classic ASP elements of the problem, get the HTML, JS and CSS working how you expect then slowly add the Classic ASP back in, you'll probably find a variable isn't being passed through that you are then using to set a `class` in HTML or something like that. *Advice from the [2nd person](https://stackoverflow.com/help/badges/1506/asp-classic) to ever earn the silver [tag:asp-classic] badge.* — user692942, Oct 26 '21 at 19:23
@UnknownCoder45 Another good way to debug this kind of problem is to look at the page source in the browser (the generated HTML) to see what might be missing, class names etc. That way you'll see what's missing after the Classic ASP server-side processing has been applied to the page which should give you some idea what part of the Classic ASP might not be behaving as expected. — user692942, Oct 26 '21 at 19:33
@user692942 man I figured out my problem and why it won't work. I have a if statement for my personal page and job page — UnknownCoder45, Oct 26 '21 at 20:05
@UnknownCoder45 Awesome, glad you have finally got to the bottom of it! I'm sure this answer helped so consider [up-voting and accepting the answer](https://stackoverflow.com/help/someone-answers) as I'm sure bZezzz would appreciate it. — user692942, Oct 26 '21 at 20:32
@user692942 No problem I have to change the question to get help with this problem — UnknownCoder45, Oct 26 '21 at 20:36

How to fix data-bs-target bootstrap version 5 not working?

1 Answers1