Как сделать это свертывание и расширить меню из родительского меню в подменю, используя CSS, HTML и javascript?

Question

Прикрепленное изображение - это мое меню, заглавная буква представляет родительское меню, а маленькая буква - дочернее меню. Я хочу, чтобы родительское меню свернулось и расширилось подменю. Любая помощь будет великолепна. [1]: https://i.stack.imgur.com/yGMch.png

<div class="row">
        <div class="col-5">
            <div class="row">
                <ul class="help-left-menu">
                    <li>
                        <a href="" class="dashboard">DASHBOARD</a>
                            </li>
                                 <li>
                                      <a href="" class="newProposal">NEW PROPOSAL</a>
                                           </li>
                                                <li>
                                            <a href="" class="proposal">PROPOSALS</a>
                                      </li>
                                  <li>
                            <a href="" class="clients">CLIENTS</a>
                          </li>
                        <li>
                     <a href="" class="drop-downMenu">View All Clients</a>
                  </li>
                <li>
           <a href="" class="drop-downMenu">Add New Clients</a>
      </li> 

      <li>
          <a href=""class="risk-profile">RISK PROFILE</a>
              </li>
                   <li>
                       <a href="" class="drop-downMenu">Client Risk Wizard</a>
                          </li>
                               <li>
                           <a href="" class="drop-downMenu">Risk Questions</a>
                       </li> 
                    <li>
                  <a href="" class="drop-downMenu">Question Categories</a>
             </li>
         <li>
       <a href="" class="drop-downMenu">Wizard Pages</a>
     </li> 

     <li>
         <a href=""class="account-opening">ACCOUNT OPENING</a>
            </li>
                 <li>
                  <a href="" class="drop-downMenu">Account Opening</a>
                          </li>
                               <li>
                           <a href="" class="drop-downMenu">Custodians</a>
                       </li> 
                    <li>
                  <a href="" class="drop-downMenu">Add Custodian</a>
             </li>
         <li>
       <a href="" class="drop-downMenu">Document Types</a>
     </li>                      
                </ul>
            </div>
        </div>
        <div class="col-7">
            <div class="row dashboard"></div>
        </div>
    </div>
</div>

Answer 1

Это реализовано с использованием jquery и css. Надеюсь, это поможет вам.

var dropdown = document.querySelectorAll('.dropdown-list'),
  dropdownArray = Array.prototype.slice.call(dropdown, 0);

dropdownArray.forEach(function(el) {
  var button = el.querySelector('a[dropdown-prop="title"]'),
    menu = el.querySelector('.dropdown-list-items'),
    icon = button.querySelector('i.dropdown-icon'),

    toggleDropdown = function() {
      $(menu).toggleClass('dropdown-list-open');
      $(icon).toggleClass('dropdown-icon-open');
    };

  button.addEventListener('click', toggleDropdown);
});

@import url(https://fonts.googleapis.com/css?family=Lato);
body {
  font-size: 20px;
  font-family: "Lato", sans-serif;
  color: #ffffff;
  background-color: #34495e;
}

.dropdown-list-container {
  padding: 0 2.0em;
  width: 250px;
  list-style: none;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.dropdown-list {
  position: relative;
  background: #16a085;
  margin-bottom: 1px;
}

.dropdown-list [dropdown-prop="title"] {
  color: #ffffff;
  padding: 0.5em 2.0em;
  display: block;
  text-decoration: none;
}

.dropdown-list [dropdown-prop="title"]:hover {
  background: #107360;
}

.dropdown-list-items {
  transition: max-height 0.4s ease-in;
  padding: 0;
  max-height: 0;
  list-style: none;
  overflow: hidden;
}

.dropdown-list-items li a {
  color: #ffffff;
  display: block;
  padding: 0.75em 2.0em;
  background: #1abc9c;
  text-decoration: none;
}

.dropdown-list-items li a:hover {
  background: #148f77;
}

.dropdown-list-open {
  transition: max-height 0.4s ease-out;
  max-height: 15em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--List Container-->
<ul class="dropdown-list-container">

  <!--Lists-->
  <li class="dropdown-list">
    <!--List Title-->
    <a href="#" dropdown-prop="title">DASHBOARD<i class="dropdown-icon"></i></a>
  </li>

  <li class="dropdown-list">
    <!--List Title-->
    <a href="#" dropdown-prop="title">NEW PROPOSAL<i class="dropdown-icon"></i></a>
  </li>

  <li class="dropdown-list">
    <!--List Title-->
    <a href="#" dropdown-prop="title">PROPOSALS<i class="dropdown-icon"></i></a>
  </li>

  <!--Second List-->
  <li class="dropdown-list">
    <!--List Title-->
    <a href="#" dropdown-prop="title">CLIENTS<i class="dropdown-icon"></i></a>
    <!--List Items-->
    <ul class="dropdown-list-items">
      <li><a href="#">View All Clients</a></li>
      <li><a href="#">Add New Clients</a></li>
    </ul>
  </li>

  <!--Third List-->
  <li class="dropdown-list">
    <!--List Title-->
    <a href="#" dropdown-prop="title">RISK PROFILE<i class="dropdown-icon"></i></a>
    <!--List Items-->
    <ul class="dropdown-list-items">
      <li><a href="#">Client Risk Wizard</a></li>
      <li><a href="#">Risk Questions</a></li>
      <li><a href="#">Question Categories</a></li>
      <li><a href="#">Wizard Pages</a></li>
    </ul>
  </li>
</ul>

Answer 2

Использование Bootstrap 4:

<html lang="en">

<head>
  <title>Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
</head>

<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      HELP PAGE
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
      <button class="dropdown-item" type="button">DASHBOARD</button>
      <button class="dropdown-item" type="button">NEW PROPOSAL</button>
      <button class="dropdown-item" type="button">PROPOSALS</button>
      <button class="dropdown-item" type="button">CLIENTS</button>
      <button class="dropdown-item" type="button">View All Clients</button>
      <button class="dropdown-item" type="button">Add New Clients</button>
      <button class="dropdown-item" type="button">RISK PROFILE</button>
      <button class="dropdown-item" type="button">Client Risk Wizard</button>
      <button class="dropdown-item" type="button">Risk Questions</button>
      <button class="dropdown-item" type="button">Question Categories</button>
      <button class="dropdown-item" type="button">Wizard Pages</button>
      <button class="dropdown-item" type="button">ACCOUNT OPENING</button>
      <button class="dropdown-item" type="button">Custodians</button>
      <button class="dropdown-item" type="button">Add Custodian</button>
      <button class="dropdown-item" type="button">Document Types</button>
    </div>
  </div>
</body>

</html>