Collapse side panel

Question

How do I collapse side panel when viewed on smaller screens, so that "panel-header" becomes a toggle button. I.e instead of hamburger button, get "Filter Students" button which will expand "panel-body".

<div class="panel">
  <div class="panel-header">
     <h3 class="panel-title">Filter Students</h3>
  </div>
  <div class="panel-body">
    <div class="search">
        <h3>SEARCH KEYWORD</h3>
        <input type="text" class="search-box" placeholder="Search" />
  </div>
 <div class="filter-categories">
     <ul class="filter">
       <li>Graphic Design</li>
        <li>Online Marketing</li>
        <li>Video Commercials</li>
        <li>Technology</li>
        <li>Photography</li>
        <li>Translation</li>
    </ul>
</div>                  
</div>
</div>  

Answer 1

Here's an example of how you can do this with jQuery toggleClass. The sidebar hides when the viewport is reduced to under 768px and can be hidden on click on larger viewports (this could be disabled if need be).

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

body,
html {
  height: 100%;
  overflow: hidden;
}
#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled {
  padding-left: 250px;
}
#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #DB1849;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}
#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}
.btn-default#menu-toggle,
.btn-default#menu-toggle:hover,
.btn-default#menu-toggle:focus {
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
  color: #DB1849;
}
/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}
.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #ddd;
}
.sidebar-nav li a:hover {
  text-decoration: none;
  color: #444;
  background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}
.sidebar-nav .sidebar-brand {
  text-align: left;
}
.sidebar-nav .sidebar-brand img {
  width: 75px;
}
.sidebar-nav ul {
  list-style: none;
  list-style-position: outside;
  padding: 0;
  margin: 0;
}
.sidebar-nav ul > li {
  font-size: 13px;
}
.sidebar-nav ul > li > a {
  color: #ddd;
  text-decoration: none;
  padding-left: 10px;
}
.sidebar-nav ul > li > a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.6);
}
@media(min-width:768px) {
  #sidebar-wrapper {
    width: 250px;
  }
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li class="sidebar-brand">
        <img src="http://kodi.wiki/images/c/c1/Thumbnail-light-transparent.png" alt="KODI">
      </li>
      <li> <a href="#">Home</a>

      </li>
      <li> <a href="#nope" data-toggle="collapse" data-target="#drop1"> Something<span class="caret"></span></a>

        <ul id="drop1" class="collapse" data-parent="#sideNavParent">
          <li><a href="about-us">Something</a>

          </li>
          <li><a href="our-journey">Something</a>

          </li>
          <li><a href="where-we-are-going">Something</a>

          </li>
        </ul>
      </li>
      <li><a href="what-we-do">Something</a>

      </li>
      <li><a href="the-building">Something</a>

      </li>
      <li><a href="volunteer">Something</a>

      </li>
    </ul>
  </div>
  <!-- /#sidebar-wrapper -->
  <!-- Page Content -->
  <div id="page-content-wrapper"> <a href="#" class="btn btn-default" id="menu-toggle"><span class="glyphicon glyphicon-th-list"></span></a>

    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <h1>KODI</h1>

        </div>
      </div>
    </div>
  </div>
  <!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->