Bootstrap 4 свернуть навигационную группу

Question

Я работаю над сайтом документации с содержанием в правом столбце и содержимым в левом столбце. TO C имеет несколько групп, содержащих код, подобный приведенному ниже. Есть ли способ свернуть и развернуть навигацию в подменю, нажав на метку привязки? Таким образом, все подменю сворачиваются при загрузке страницы, а затем пользователь может развернуться и свернуться при необходимости.

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-->

Answer 1

Да, вы можете использовать его по умолчанию (свернуть) и тег переключения данных в Bootstrap 4. Пожалуйста, попробуйте ниже фрагмент:

.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;
            cursor: pointer;
          }

          .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;
          }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<a class="nav-link text-dark" asp-area="" asp-page="/UserGuide/Items" data-toggle="collapse" data-target="#slide-submenu">Adding and Managing Items</a>
      <nav id="slide-submenu" class="doc-sub-menu nav flex-column collapse">
        <p>
          <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>
        </p>
      </nav>