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 1

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>

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

Question

1 answers

solution1
2 2021-10-22 17:38:52

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

Question

1 answers

solution1 2 2021-10-22 17:38:52

solution1
2 2021-10-22 17:38:52