I am currently developing a single page application for an ESP32 device. I have chosen to keep all the content in one document as there is not a lot of information to display.
My approach started with using the collapse class from Bootstrap 4.1.2. While it is functional, there seems to be an issue that I cannot seem to resolve.
Since only one content section should be visible at a time, I want to prevent users from hiding it by clicking on the corresponding nav-link. Instead, I want them to only toggle between different content sections using the different nav-links available.
How can I achieve this functionality?
<!doctype html>
<html lang="en">
<head>
<title>LOGO</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<!-- A vertical navbar -->
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container justify-content-center">
<a class="navbar-brand abs " href="#">
<span class="menu-collapsed">LOGO</span>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow text-center" id="navbarNavDropdown">
<ul class="nav navbar-nav flex-fill mx-auto flex-nowrap">
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" data-target="#collapseOne, .navbar-collapse.show"
aria-expanded="true" aria-controls="collapseOne" href="#">TEST1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" data-target="#collapseTwo, .navbar-collapse.show"
aria-expanded="false" aria-controls="collapseTwo" href="#">TEST2</a>
</li>
<li class="nav-item">
<a class="nav-link" role="button" data-toggle="collapse" data-target="#collapseThree, .navbar-collapse.show"
aria-expanded="false" aria-controls="collapseThree" href="#">TEST3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-cog"></i>
<span>Settings</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="accordionExample">
<div class="row">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body active">
1111111111111111111111111111111111111
</div>
</div>
</div>
<div class="row">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
222222222222222222222222222222222222
</div>
</div>
</div>
<div class="row">
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
333333333333333333333333333333333333
</div>
</div>
</div>
</body>
</html>