Currently, I am working on developing a navigation system. The objective is to have an accordion-like layout for mobile and tab-based layout for desktop. Although I have implemented this setup, there seems to be an issue:
For instance, if "Link #2" tab is open on the desktop version and then switched to the mobile view, the corresponding tab in the accordion is also opened. However, if another tab such as "Link #3" is selected in the accordion and then back to desktop view, the content of "Link #3" is displayed under the "Link #2" section.
In scenarios where all tabs are collapsed in the accordion (only headers are visible), upon switching back to desktop mode, no content is presented.
I have conducted a search but haven't come across any instances of combining accordion and tabs successfully.
This is my initial attempt at learning Bootstrap and JavaScript, so I apologize in advance for any errors. Any guidance towards a solution would be greatly appreciated!
.container .nav-tabs {
display: none;
}
/* MEDIA QUERY */
@media screen and (min-width: 600px) {
.container .nav-tabs {
display: flex;
}
.accordion-item h2 {
display: none;
}
.container .accordion-item {
border: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo<</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525fskZmkkjjkljilfgbdbfcabddeefee9df4bf7e5dadadaf0b0e6dabcdadf181ffbffcdf03c20">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUeliAGO+uCVXJi0CjmCapSmOojHl+/YkVesdf33nhLnuZ2cdeu0gLyPaamPTQUCCs095PvowxCOxxwyQTWSUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#flush-collapseOne" data-bs-toggle="tab">Link #1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#flush-collapseTwo" data-bs-toggle="tab">Link #2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#flush-collapseThree" data-bs-toggle="tab">Link #3</a>
</li>
</ul>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Link #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">content 1</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Link #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">content 2</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Link #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">content 3</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000dkoMGlkjpgofmseku53kdjuwKP42MjkchvuOlVTcpSJprSaOBHtaMKIRKRRPQ">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>