I am currently designing a documentation website layout with the Table of Contents displayed in a right-hand column and the content presented in the left-hand column. The TOC includes various groups of code snippets similar to the example below. Is there a method to enable collapsing and expanding of the submenu navigation by clicking on the anchor tag? This way, all submenus would be collapsed upon page load, allowing users to expand and collapse them as needed.
Orgbrat
.doc-sub-menu {
list-style: none;
padding-left: 0;
}
.doc-sub-menu .nav-link {
margin-bottom: 10px;
font-size: 12px;
display: block;
color: #616670;
padding: 0;
padding-left: 34px;
background: none;
}
.doc-sub-menu .nav-link:first-child {
padding-top: 5px;
}
.doc-sub-menu .nav-link:hover {
color: #494d55;
text-decoration: none;
background: none;
}
.doc-sub-menu .nav-link:focus {
background: none;
}
.doc-sub-menu .nav-link.active {
background: none;
color: #40babd;
}
.body-blue .doc-sub-menu .nav-link.active {
color: #58bbee;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<a class="nav-link text-dark" asp-area="" asp-page="/UserGuide/Items">Adding and Managing Items</a>
<nav class="doc-sub-menu nav flex-column">
<a class="nav-link scrollto" href="#html">Medications</a>
<a class="nav-link scrollto" href="#css">Blood Sugars</a>
<a class="nav-link scrollto" href="#sass">Pharmacies</a>
<a class="nav-link scrollto" href="#less">Physicians</a>
<a class="nav-link scrollto" href="#javascript">Family Members</a>
<a class="nav-link scrollto" href="#python">Appointments</a>
<a class="nav-link scrollto" href="#php">Medical Records</a>
</nav>
<!--//nav-->