Collapsible sidebar menu - Bootstrap 3 / HTML

Question

How can I create collapsible sub menus from the below? What ever I try just maps the items directly below with no collapsing.

Overall Site
       ------Item 1
       ------Item 2
       ------Item 3
Dashboards
       ------Item 1
       ------Item 2
       ------Item 3
Services
       ------Item 1
       ------Item 2
       ------Item 3

Code with side bar menu overlay.

<!-- Sidebar -->
      <div id="sidebar-wrapper">
         <ul class="sidebar-nav">
            <li class="sidebar-brand">
            </li>
            <li><a href="main.html"><i class="material-icons">home</i></a>
            </li>
            <br>
            <br>
            <li>
              <a href="">Overall Site</a>
            </li>
             <li>
              <a href="">Dashboards</a>
            </li>
            <li>
               <a href="">Services</a>
            </li>
            <li>
         </ul>
      </div>

Answer 1

If you are using bootstrap, you can do it in this way!

    $('.nav-second').on('show.bs.collapse', function () {
        $('.nav-second.in').collapse('hide');
    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="sidebar-wrapper">
         <ul class="sidebar-nav">
            <li class="sidebar-brand">
            </li>
            <li><a href="main.html"><i class="material-icons">home</i></a>
            </li>
            <li>
              <a href="#overall" data-toggle="collapse" aria expanded="false">Overall </a>
                    <ul id="overall" class="nav-second collapse">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                    </ul>
            </li>
             <li>
              <a href="#dashboard" data-toggle="collapse" aria expanded="false">Dashboard </a>
                    <ul id="dashboard" class="nav-second collapse">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                    </ul>
            </li>
            <li>
                <a href="#service" data-toggle="collapse" aria expanded="false">Service </a>
                    <ul id="service" class="nav-second collapse">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                    </ul>
            </li>
            <li>
         </ul>
      </div>