My response fiddle

by Luiza CICONE

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="main-wrapper">

  <div class="sidebar1">

    <a href="ssb1" class="category" id="sb1" onclick="return false">
      <div>AAA</div>
    </a>

    <a href="ssb2" class="category" id="sb2" onclick="return false">
      <div>BBB</div>
    </a>

    <a href="ssb3" class="category" id="sb3" onclick="return false">
      <div>CCC</div>
    </a>

  </div>

  <div class="sidebar2" id="ssb1" style="display: none;">

    <div class="sb2-content">

      <h3>Choose Something:</h3>

    </div>

    <div class="sb2-menu">

      <ul>
        <li>
          <a href="kas" onclick="return false">AAAAAAAAAAAAA</a>
        </li>

        <li>
          <a href="weekly_reports" onclick="return false">AAAAAAAAAAA</a>
        </li>

        <li>
          <a href="exceltower" onclick="return false">AAAAAAAAAAA</a>
        </li>
      </ul>

    </div>

  </div>

  <div class="sidebar2" id="ssb2" style="display: none;">

    <div class="sb2-content">

      <h3>Choose Something:</h3>

    </div>

    <div class="sb2-menu">

      <ul>
        <li>
          <a href="#">BBBBBBBBBB</a>
        </li>

        <li>
          <a href="#">BBBBBBBBBB</a>
        </li>

        <li>
          <a href="#">BBBBBBBBBB</a>
        </li>
      </ul>

    </div>

  </div>

  <div class="sidebar2" id="ssb3" style="display: none;">

    <div class="sb2-content">

      <h3>Choose Something:</h3>

    </div>

    <div class="sb2-menu">

      <ul>
        <li>
          <a href="#">CCCCCCCCC</a>
        </li>

        <li>
          <a href="#">CCCCCCCC</a>
        </li>

        <li>
          <a href="#">CCCCCCCC</a>
        </li>
      </ul>

    </div>

  </div>

  <div...

CSS

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  font-family: arial;
}

.main-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.main-wrapper > .ui-effects-wrapper {
  width: 0 !important;
  overflow: visible !important;
}

.main-wrapper div {}

.sidebar1 {
  background-color: #29313c;
  color: white;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.sidebar1 .category {
  flex: 1;
  height: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #90A4BB;
  text-decoration: none;
  font-weight: bold;
  z-index: 1;
}

.sidebar1 .category:hover {
  color: white;
  background-color: #2E3C54;
}

.sidebar1 .category:not(:last-child) {
  border-bottom: 1px solid #90A4BB;
}

.sidebar1 .category div {}

.sidebar2 {
  background-color: #dee3e7;
  flex-wrap: wrap;
  flex-direction: column;
  flex-basis: 330px;
  display: flex;
}

.sidebar2 .sb2-content {
  flex-basis: 60px;
}

.sidebar2 .sb2-content h3 {
  padding: 0;
  margin: 0;
  text-decoration: underline;
  color: #363738;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar2 .sb2-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.sidebar2 .sb2-menu li {
  padding: 0;
  /*color: #8e9baa;*/
  /*border-top: 1px solid #cad2db;*/
  border-bottom: 1px solid #cad2db;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.sidebar2 .sb2-menu li:last-child {
  border: 0;
}

.sidebar2 .sb2-menu li a {
  color: #8e9baa;
  text-decoration: none;
  /*width: 100%;*/
  height: 100%;
  display: block;
  padding: 3% 0 3% 10%;
}

.sidebar2 .sb2-menu li:hover {
  background-color: #B6C6D4;
  color: #363738;
}

.sidebar2 .sb2-menu li a:hover {
  background-color: #B6C6D4;
  color:...

JavaScript

$(document).ready(function() {
  // Globals
  var ssbar = '';
  var cssbar = '';

  $('.sidebar1 a').click(function() {

    if (ssbar == '') {
      ssbar = $(this).attr('href');
      cssbar = $(this).attr('href');
      $("#" + ssbar).toggle('slide');

    } else {
      cssbar = $(this).attr('href');

      if (cssbar == ssbar) {
        $("#" + ssbar).toggle('slide');
      } else {
        $("#" + ssbar).hide('slide');
        $("#" + cssbar).show('slide');
        ssbar = $(this).attr('href');

      }
    }
    return false;
  });



  $('.sidebar1 > a').click(function() {
    var e = $(this);
    if (e.hasClass("active-sb1")) {
      e.removeClass('active-sb1');
    } else {
      e.addClass('active-sb1');
      e.siblings().removeClass('active-sb1');
    }
  });

  $('.sidebar2 a').click(function() {
    var e = $(this);
    e.addClass('active-sb2');
    e.parent().siblings().children().removeClass('active-sb2');
  });


});