bootstrap side menu

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<html>

<body class="">
    <nav class="navbar navbar-default no-margin">
        <div class="navbar-header fixed-brand">
        <a class="navbar-brand" href="#">Help Documents</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle">
                <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
            </button>
            
        </div>
        <!-- navbar-header-->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2">
                        <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
                    </button>
                </li>
            </ul>
        </div>
    </nav>
    <div id="wrapper" class="toggled-2">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
                <li class="active">
                    <a href="#" onclick="showAbout()">
                        <span class="fa-stack fa-lg">
                            <i class="fa fa-lightbulb-o fa-stack-1x "></i>
                        </span> About</a>
                </li>
                <li>
                    <a...

CSS

/* Hide unwanted overflow controls */
body {
    overflow-x:hidden !important;
}

#wrapper{
	overflow-x:hidden !important;
}

/* Bootstrap Btn Color Overrides */
.btn-primary {
	background-color: #21a6df !important;
    border-color: #21a6df !important;
    transition: all ease .3s !important;
}


/* BS Example Stuff */
.bs-example:after {
  content: "Example";
  position: absolute;
  top:  15px;
  left: 15px;
  font-size: 12px;
  font-weight: bold;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Fix Modal so it looks right */
.modal-header {
	min-height:25.43px !important;
	padding:inherit !important;
	margin-top: 10px !important;
	margin-left: 10px !important;
	margin-right: 10px !important;
} 

/* Fix navbar on shrink links */
.navbar-nav>li>a {
    margin-left: 20px !important;
}

/* Style Navbar Text */
body > div.navbar > div > div.navbar-header > h3{
    color: #4C4C4D !important;
	/* font-weight: bold !important; */
}

/* Float */
#collapseOne > div > a{
	float: right;
	border: none;
}

#collapseTwo > div > a{
	float: right;
	border: none;
}

#collapseThree > div > a{
	float: right;
	border: none;
}

#collapseFour > div > a{
	float: right;
	border: none;
}

#collapseFive > div > a{
	float: right;
	border: none;
}

#collapseSix > div > a{
	float: right;
	border: none;
}

#collapseSeven > div > a{
	float: right;
	border: none;
}

#collapseEight > div > a{
	float: right;
	border: none;
}

#collapseSix > div > img:nth-child(3){
	float: right;
	border: none;
}

/* Panel CSS */
.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e113";
    float: right;
    color: white;
}
.panel-heading a.collapsed:after {
    content:"\e114";
}

.panel-default>.panel-heading {
    color: #FFFFFF !important;
    background-color: rgb(33, 166, 223) !important;
    border-color: #bce8f1 !important;
}

.panel-group .panel {
	margin-top: 20px !important;
}

/* BS Callouts */
.bs-callout {
    padding: 20px;
    margin: 20px 0;
  ...

JavaScript

$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
     $("#menu-toggle-2").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled-2");
        $('#menu ul').hide();
    });
 
     function initMenu() {
      $('#menu ul').hide();
      $('#menu ul').children('.current').parent().show();
      //$('#menu ul:first').show();
      $('#menu li a').click(
        function() {
          var checkElement = $(this).next();
          if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return false;
            }
          if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
            }
          }
        );
      }
    $(document).ready(function() {initMenu();});