如何使垂直药栏可折叠？

Question

我在一个使用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>

我将如何编辑此代码以使其成为可能？