Как сделать выпадающий список в сайдбаре?
Нужно что бы Section 1 скрывал в себе все ссылки которые идут ниже нее вплоть до Section 2 и соотвестенно Section 2 тоже скрывала под собой все элементы и они выпадали когда нажимаешь на соотвестующую секцию делал с помощью bootstrap 5
body {
overflow: hidden;
}
.lesson:before {
margin-right: 15px;
}
.lesson1:before {
margin-right: 15px;
}
.lesson:after {
font-family: 'FontAwesome';
content: '\f023';
}
.lesson1:after {
font-family: 'FontAwesome';
content: '\f023';
}
.lesson:after {
position: absolute;
left: 90%;
}
.lesson1:after {
position: absolute;
left: 90%;
}
.tex {
margin-left: 100px;
margin-top: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #E7F7FF;">
<a class="sidebar-toggle">
<i class="hamburger align-self-center"></i>
</a>
<form class="d-none d-sm-inline-block">
<div class="input-group input-group-navbar">
<input type="text" class="form-control" style="background-color: #E7F7FF;" placeholder="Search projects…" aria-label="Search">
<button class="btn" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search align-middle"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</button>
</div>
</form>
<a class="nav-link link-dark" href="#" id="servicesDropdown" role="button" aria-haspopup="true" aria-expanded="false">
Sample course
</a>
</nav>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class=" accordion bg-light border-right vh-100" id="sidebar-wrapper" style="width: 20rem;">
<i class="far fa-file-alt"></i>
<div class="list-group list-group-flush overflow-auto h-100">
<p>Section 1</p>
<p align="center">Verius avum festinanter ratione arte hinc deceat odit solitum quivere pressius ex</p>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Dashboard</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson1</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 2</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 3</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 4</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 5</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 6</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 7</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 8</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 9</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 10</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 11</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 12</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 13</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light fa fa-file-text-o">Lesson 14</a>
<a href="#" class="lesson1 fa fa-clock-o list-group-item list-group-item-action bg-light">Quiz 1</a>
<p>Section 1</p>
<p align="center">Appellet contemni pisonem emolumenta hunc uterque dubitant commoventur mediocribus desiderat comprehensum privasse</p>
<a href="#" class=" lesson list-group-item list-group-item-action bg-light">Lesson 15</a>
<a href="#" class=" lesson list-group-item list-group-item-action bg-light">Lesson 16</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light">Lesson 17</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light">Lesson 18</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light">Lesson 19</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light">Lesson 20</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light">Lesson 21</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light">Lesson 22</a>
<a href="#" class="lesson list-group-item list-group-item-action bg-light">Lesson 23</a>
<a href="#" class="lesson1 fa fa-clock-o list-group-item list-group-item-action bg-light">Quiz 2</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class=" tex content-item-summary">
<h3 class="course-item-title question-title">Lesson 1</h3>
<div class="content-item-description lesson-description">
<p>Potestate liberalis stabilitatem democriteum aliquid cernere popularia aliquantum similiora appellavit leve usus</p>
<p>Nemo fluere errat cleanthes timiditas videris iucundi frugaliter duce longi populorum curem negabat praetermissum quanto parte</p>
<p>Nolo an debuit oratio videbis beate obruebantur paucis docuit elementa prodest cn epicuro bonorum maneant explet dixit nullo appellantur dicam</p>
<p>Quot stulti sapienter more asoti experiamur praeponatur nobis omnisque perspexerit exclusis everti maioribus proverbia referebat licere praeteritorum similes</p>
<p>Frangi serpere neque quaeri vivere mea locus prudenter summus omnino destiterit restincta ne cato tyrannus leges mehercule respondeas</p>
<p>Mutat innumerabilia relaxat pythagoras discipulos stoici sironem uberiora ingenuas curem elegantius invectio belle</p>
<p>Inventoribus aegyptum egone est fortasse graecis aditus pecudis explanatum diodorus optime coluit levamentum cui percipiendas bona adhibebat</p>
<p>Aberramus perspecta dicuntur omnem putet nihilne pecuniae naturae moriens triarius pareat vita</p>
<p>Afferat levare inventoribus inquies moriuntur pravae concederem concedere instructus metuetur musicis omittam insipientium appellabant vocabulis constanter</p>
<p>Indignum sextus dictata commota peti mentio iste debilitas iucunditatem maior</p>
<p>Putes tubulo brevem themistocles nescius modi defensa honestatis praecepta vitiorum orbus eiusdem perspecta</p>
<p>Nihili conclusum voluptate facillimum obruebantur caecitas indicant captum decimum diem quaerebam beatus iudicari</p>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>