Ive been trying to use the nav-tabs (https://getbootstrap.com/docs/5.2/components/navs-tabs/#tabs) from bootstrap (version 5.2.2) in my angular application but for some reason only the content in the first tab shows while the other tabs are blank even though they have content in them. Is there something im missing? because ive followed the documentation to the letter and it still dosent work
<div class="card border-0">
<div class="card-header white-background d-flex justify-content-around">
<ul class="nav nav-underline card-header-tabs pt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="domestic-tab" data-bs-toggle="tab"
data-bs-target="#domestic-tab-pane" type="button" role="tab"
aria-controls="domestic-tab-pane" aria-selected="true">Domestic Transfer</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="international-tab" data-bs-toggle="tab"
data-bs-target="international-tab-pane" type="button" role="tab"
aria-controls="international-tab-pane" aria-selected="false">International
Transfer</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="intrabank-tab" data-bs-toggle="tab"
data-bs-target="intrabank-tab-pane" type="button" role="tab"
aria-controls="intrabank-tab-pane" aria-selected="false">Intrabank Transfer</button>
</li>
</ul>
</div>
<div class="card-body ">
<div class="tab-content">
<div class="tab-pane show fade active" id="domestic-tab-pane" role="tabpanel"
aria-labelledby="domestic-tab" tabindex="0">
<div class="row pb-4 pt-3">
<div class="col">
<label for="accountInput" class="form-label">Recipient Account Number</label>
<input type="text" class="form-control form-control-lg border border-dark" id="accountInput" aria-label="Account number">
</div>
<div class="col">
<label for="bankInput" class="form-label">Recipient Bank</label>
<input type="text" class="form-control form-control-lg border border-dark" id="bankInput" aria-label="Bank">
</div>
</div>
<div class="row pb-4">
<div class="col">
<label for="amountInput" class="form-label">Amount</label>
<input type="text" class="form-control form-control-lg border border-dark" id="amountInput" aria-label="Amount">
</div>
<div class="col">
<label for="pinInput" class="form-label">Pin</label>
<input type="text" class="form-control form-control-lg border border-dark" id="pinInput" aria-label="Pin">
</div>
</div>
<div class="form-check">
<input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="addBeneficiary">
<label class="form-check-label my-1" for="addBeneficiary">
Add to Beneficiary
</label>
</div>
<div class="row py-4">
<div class="col text-center">
<button button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
</div>
</div>
</div>
<div class="tab-pane fade" id="international-tab-pane" role="tabpanel"
aria-labelledby="international-tab" tabindex="1">
<div class="row pb-4 pt-3">
<div class="col">
<label for="accountInput" class="form-label">Recipient Account Number</label>
<input type="text" class="form-control form-control-lg border border-dark" id="accountInput" aria-label="Account number">
</div>
<div class="col">
<label for="bankInput" class="form-label">Recipient Bank</label>
<input type="text" class="form-control form-control-lg border border-dark" id="bankInput" aria-label="Bank">
</div>
</div>
<div class="row pb-4">
<div class="col">
<label for="amountInput" class="form-label">Amount</label>
<input type="text" class="form-control form-control-lg border border-dark" id="amountInput" aria-label="Amount">
</div>
<div class="col">
<label for="pinInput" class="form-label">Pin</label>
<input type="text" class="form-control form-control-lg border border-dark" id="pinInput" aria-label="Pin">
</div>
</div>
<div class="form-check">
<input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="addBeneficiary">
<label class="form-check-label my-1" for="addBeneficiary">
Add to Beneficiary
</label>
</div>
<div class="row py-4">
<div class="col text-center">
<button button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
</div>
</div>
</div>
<div class="tab-pane fade" id="intrabank-tab-pane" role="tabpanel"
aria-labelledby="intrabank-tab" tabindex="0">
</div>
</div>
</div>
</div>
Ive tried changing the names of the id's on each tab to see if thats the issue, ive also tried changing the tab indexes but nothing still shows on the other tabs
The two mentioned tabs are not working because they don't have correct element id selector provided in the data-bs-target attribute (they're missing #, so the elements cannot be found).
So, add the correct selectors:
data-bs-target="#international-tab-pane"
data-bs-target="#intrabank-tab-pane"
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="card border-0">
<div class="card-header white-background d-flex justify-content-around">
<ul class="nav nav-underline card-header-tabs pt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="domestic-tab" data-bs-toggle="tab" data-bs-target="#domestic-tab-pane" type="button" role="tab" aria-controls="domestic-tab-pane" aria-selected="true">Domestic Transfer</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="international-tab" data-bs-toggle="tab" data-bs-target="#international-tab-pane" type="button" role="tab" aria-controls="international-tab-pane" aria-selected="false">International
Transfer</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="intrabank-tab" data-bs-toggle="tab" data-bs-target="#intrabank-tab-pane" type="button" role="tab" aria-controls="intrabank-tab-pane" aria-selected="false">Intrabank Transfer</button>
</li>
</ul>
</div>
<div class="card-body ">
<div class="tab-content">
<div class="tab-pane show fade active" id="domestic-tab-pane" role="tabpanel" aria-labelledby="domestic-tab" tabindex="0">
<div class="row pb-4 pt-3">
<div class="col">
<label for="accountInput" class="form-label">Recipient Account Number</label>
<input type="text" class="form-control form-control-lg border border-dark" id="accountInput" aria-label="Account number">
</div>
<div class="col">
<label for="bankInput" class="form-label">Recipient Bank</label>
<input type="text" class="form-control form-control-lg border border-dark" id="bankInput" aria-label="Bank">
</div>
</div>
<div class="row pb-4">
<div class="col">
<label for="amountInput" class="form-label">Amount</label>
<input type="text" class="form-control form-control-lg border border-dark" id="amountInput" aria-label="Amount">
</div>
<div class="col">
<label for="pinInput" class="form-label">Pin</label>
<input type="text" class="form-control form-control-lg border border-dark" id="pinInput" aria-label="Pin">
</div>
</div>
<div class="form-check">
<input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="addBeneficiary">
<label class="form-check-label my-1" for="addBeneficiary">
Add to Beneficiary
</label>
</div>
<div class="row py-4">
<div class="col text-center">
<button button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
</div>
</div>
</div>
<div class="tab-pane fade" id="international-tab-pane" role="tabpanel" aria-labelledby="international-tab" tabindex="1">
<div class="row pb-4 pt-3">
<div class="col">
<label for="accountInput" class="form-label">Recipient Account Number</label>
<input type="text" class="form-control form-control-lg border border-dark" id="accountInput" aria-label="Account number">
</div>
<div class="col">
<label for="bankInput" class="form-label">Recipient Bank</label>
<input type="text" class="form-control form-control-lg border border-dark" id="bankInput" aria-label="Bank">
</div>
</div>
<div class="row pb-4">
<div class="col">
<label for="amountInput" class="form-label">Amount</label>
<input type="text" class="form-control form-control-lg border border-dark" id="amountInput" aria-label="Amount">
</div>
<div class="col">
<label for="pinInput" class="form-label">Pin</label>
<input type="text" class="form-control form-control-lg border border-dark" id="pinInput" aria-label="Pin">
</div>
</div>
<div class="form-check">
<input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="addBeneficiary">
<label class="form-check-label my-1" for="addBeneficiary">
Add to Beneficiary
</label>
</div>
<div class="row py-4">
<div class="col text-center">
<button button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
</div>
</div>
</div>
<div class="tab-pane fade" id="intrabank-tab-pane" role="tabpanel" aria-labelledby="intrabank-tab" tabindex="0">
sdfsdd
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>See Bootstrap source code about the selectors:
let selector = element.getAttribute('data-bs-target') if (!selector || selector === '#') { let hrefAttribute = element.getAttribute('href') // The only valid content that could double as a selector are IDs or classes, // so everything starting with `#` or `.`. If a "real" URL is used as the selector, // `document.querySelector` will rightfully complain it is invalid. // See https://github.com/twbs/bootstrap/issues/32273 if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) { return null }
https://github.com/twbs/bootstrap/blob/main/js/src/dom/selector-engine.js#L11