<ul class="sidebar-menu">
    <li><span class="nav-section-title"></span></li>
    <li class="have-children"><a href="#"><span class="fa fa-university"></span>Exhibitions</a>
      <ul>
        <li><a href="#">Add Exhibition</a></li>
        <li><a href="#">View Exhibitions</a></li>
      </ul>
    </li>
    <li class="have-children"><a href="#"><span class="fa fa-tags"></span>Category</a>
      <ul>
        <li><a href="#">Add Category</a></li>
        <li><a href="#">View Categories</a></li>
      </ul>
    </li>
    <li class="have-children"><a href="#"><span class="fa fa-trophy"></span>Award</a>
      <ul>
        <li><a href="#">Add Award</a></li>
        <li><a href="#">View Awards</a></li>
      </ul>
    </li>
    <li class="have-children"><a href="#"><span class="fa fa-gavel"></span>Jury</a>
      <ul>
        <li><a href="#">Add Jury</a></li>
        <li><a href="#">View Juries</a></li>
      </ul>
    </li>
    <li class="have-children"><a href="#"><span class="fa fa-user-o"></span>Author</a>
      <ul>
        <li><a href="#">Add Author</a></li>
        <li><a href="#">View Authors</a></li>
      </ul>
    </li>
    <li><a href="#"><span class="fa fa-picture-o"></span>Gallery</a></li>
    <li class="have-children"><a href="#"><span class="fa fa-flag"></span>Reports</a>
      <ul>
        <li><a href="#">View Judging points</a></li>
        <li><a href="#">Create Acceptances List</a></li>
        <li><a href="#">Create Awarded List</a></li>
        <li><a href="#">View Candidates for Awards</a></li>
        <li><a href="responsive_table.html">Send Report Cards</a></li>
      </ul>
    </li>
    <li><a href="#"><span class="fa fa-envelope-o"></span>Messages</a></li>
    <li><a href="#"><span class="fa fa-gear"></span>Configuration</a></li>
  </ul>

body {
  font-family: sans-serif;
  font-size: 16px;
  color: #fff;
}
ul.sidebar-menu {
    margin: 0;
    padding: 0;
    max-width: 400px;
    list-style: none;
    list-style-type: none;
}
.sidebar-menu li a span {
  margin-right: 20px;
  color: #fff;
}
.sidebar-menu li a  {
  background-color: #4d5158;
  padding: 20px 25px;
  display: block;
  text-decoration: none;
  color: #fff;
}
.sidebar-menu li a:hover  {
  background-color: #52565d;
  padding: 20px 25px;
  display: block;
  text-decoration: none;
  color: #fff;
}
li.have-children ul {
  padding: 0px;
} 
li.have-children ul li a {
  background-color: #3c3636;
  padding-left: 62px;
} 
li.have-children ul li a:hover {
  color: #fff;
  background-color: #52565d;
  padding-left: 62px;
} 
li.have-children, li {
  position: relative;
}
.have-children span::after {
  position: absolute;
  right: 30px;
  content: "\f054";
  color: #fff;
  transition: all .5s;
}
li.active.have-children span::after {
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sidebar-menu .have-children > ul {
    display: none;
}

$(document).ready(function(){

  $(".sidebar-menu > li.have-children a").on("click", function(i){
      i.preventDefault();
    if( ! $(this).parent().hasClass("active") ){
      $(".sidebar-menu li ul").slideUp();
      $(this).next().slideToggle();
      $(".sidebar-menu li").removeClass("active");
      $(this).parent().addClass("active");
    }
    else{
      $(this).next().slideToggle();
      $(".sidebar-menu li").removeClass("active");
        }
    });
});