Я работаю над сайтом, используя Bootstrap 4, и у меня есть боковая панель с некоторыми опциями меню для страницы администратора.На панели таблеток у меня есть один элемент навигации, на который я хочу щелкнуть, чтобы он раскрылся и дал мне еще несколько опций на панели таблеток.
Это то, что у меня есть сейчас для отображения страницы:

Три пункта ниже ручного ввода данных являютсяэлементы, которые я хочу сделать разборными и развернуть, когда я нажимаю на Ручной ввод данных.
Я попытался добавить класс свернутого в li для элемента навигации Ручной ввод данных, но когда я это сделал, он исчезает.Я предполагаю, что это потому, что нужно что-то, чтобы расширить это.
Вот то, что у меня есть, на данный момент, код мудрый:
<div class="col-lg-2">
<ul id="adminPills"class="nav flex-column nav-pills bg-dark">
<li class="nav-item"><a class="nav-link active text-muted" data-toggle="tab" href="#dashboard"><span class="fas fa-chart-line"></span> Dashboard</a></li>
<li class="nav-item"><a class="nav-link text-muted" data-toggle="tab" href="#permissions"><i class="fas fa-user-alt"></i> Permissions</a></li>
<li class="nav-item collapse"><a class="nav-link text-muted " data-toggle="tab" href="#permissions"><i class="fas fa-database"></i> Manual Data Entry</a>
<ul class="nav flex-column nav-pills bg-dark">
<div style="padding-left:0px;">
<li class="nav-item"><a class="nav-link text-muted" href="#">Historical Data</a></li>
<li class="nav-item"><a class="nav-link text-muted" href="#">Company News</a></li>
<li class="nav-item"><a class="nav-link text-muted" href="#">Financial Report</a></li>
</div>
</ul>
</li>
<li class="nav-item"><a class="nav-link text-muted" data-toggle="tab" href="#email"><i class="fas fa-mail-bulk"></i> Send Email to Users</a></li>
</ul>
</div>
Как бы я отредактировал этот код, чтобы сделать это возможным?