Bootstrap 3 side menu

Bootstrap 3 side menu

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-4 col-md-4 sidenavi">
            <ul class="nav nav-pills nav-stacked andrews">
                <li class="nav-header"> <a href="#" data-toggle="collapse" data-target="#apmenu0">
    Controls <i class="glyphicon glyphicon-chevron-up"></i>
  </a>

                    <ul class="collapse in" id="apmenu0">
                        <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a>
                        </li>
                        <li><a href="#here"><i class="glyphicon glyphicon-envelope"></i> Messages <span class="badge badge-success">4</span></a>
                        </li>
                        <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Settings</a>
                        </li>
                        <li><a href="#"><i class="glyphicon glyphicon-comment"></i> Shoutbox</a>
                        </li>
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i> Staff List</a>
                        </li>
                        <li><a href="#"><i class="glyphicon glyphicon-flag"></i> Options</a>
                        </li>
                        <li><a href="#"><i class="glyphicon glyphicon-exclamation-sign"></i> Rules &amp; Regulations</a>
                        </li>
                        <li><a href="#"><i class="glyphicon glyphicon-off"></i> Logout</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-header"> <a href="#" data-toggle="collapse" data-target="#apmenu">
    Section <i class="glyphicon glyphicon-chevron-up"></i>
  </a>

                    <ul class="collapse" id="apmenu">
                        <li><a href="#">Information &amp; Stats</a>
                ...

CSS

ul, li {
    list-style:none;
    margin:0;
    padding-left:5px
}
body {
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:16px 16px;
}
.andrews {
    position:fixed;
    background:pink;
    margin:20px;
    -webkit-box-shadow: 4px 4px 3px 0px rgba(50, 50, 50, 0.92);
    -moz-box-shadow: 4px 4px 3px 0px rgba(50, 50, 50, 0.92);
    box-shadow: 4px 4px 3px 0px rgba(50, 50, 50, 0.92);
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    border-top-left-radius: 20px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

[data-toggle=collapse]{font-size:28px}
.andrews a {
    padding-right:20px;
    color:black
}
.mastercontent {
    color:white;
}

JavaScript

$('[data-toggle=collapse]').click(function () {

    // toggle icon
    $(this).find("i").toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
    $('.collapse').not($(this).data("target")).collapse('hide');

});

$('.collapse').on('hidden', function () {
    $(this).parent("div").find(".icon-chevron-up")
        .removeClass("icon-chevron-up").addClass("icon-chevron-down");
});