<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3>Choose a Department</h3> <ul class="list-group"> <li class="list-group-item"> <a data-toggle="collapse" href="#department-cs">Computer Science</a> <ul class="list-group collapse" id="department-cs"> <h4>Choose a Course</h4> <li class="list-group-item"> <a data-toggle="collapse" href="#course-cs2150">CS2150</a> <ul class="list-group collapse" id="course-cs2150"> <h4>Choose a Section</h4> <li class="list-group-item"><a href="#">Section 001</a></li> <li class="list-group-item"><a href="#">Section 002</a></li> </ul> </li> <li class="list-group-item"><a href="#">CS2110</a></li> <li class="list-group-item"><a href="#">CS1110</a></li> </ul> </li> <li class="list-group-item"> <a data-toggle="collapse" href="#department-musi">Music</a> <ul class="list-group collapse" id="department-musi"> <h4>Choose a Course</h4> <li class="list-group-item"><a href="#">MUSI2350</a></li> </ul> </li> </ul> </div>