<div class="col-sm-4 col-md-3">
  <ul class="list list-unstyled list-product-nav">
    <li> <a href="#" class="list-product-cat"> Conference &amp; Side Tables <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true"></span> </a>
      <ul class="list list-unstyled list-product-subnav">
        <li> <a href="#">Axis</a> </li>
        <li> <a href="#">Modulus</a> </li>
      </ul>
      <!-- /.list-product-subnav -->
    </li>
    <li> <a href="#" class="list-product-cat"> Height Adjustable Desks <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true"></span> </a>
      <ul class="list list-unstyled list-product-subnav">
        <li> <a href="#">Agile Electric</a> </li>
        <li> <a href="#">Agile Winder</a> </li>
      </ul>
      <!-- /.list-product-subnav -->
    </li>
    <li> <a href="#" class="list-product-cat"> Private Office <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true"></span> </a>
      <ul class="list list-unstyled list-product-subnav">
        <li> <a href="#">Agile</a> </li>
        <li> <a href="#">Anvil</a> </li>
        <li> <a href="#">Axis</a> </li>
      </ul>
      <!-- /.list-product-subnav -->
    </li>
    <li> <a href="#" class="list-product-cat"> Receptions <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true"></span> </a>
      <ul class="list list-unstyled list-product-subnav">
        <li> <a href="#">Anvil</a> </li>
        <li> <a href="#">Axis</a> </li>
      </ul>
      <!-- /.list-product-subnav -->
    </li>
    <li> <a href="#" class="list-product-cat"> Seating <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true"></span> </a>
      <ul class="list list-unstyled list-product-subnav">
        <li> <a href="#">Adapta</a> </li>
        <li> <a href="#">Balance Executive</a> </li>
        <li> <a href="#">Balance Guest</a> </li>
        <li> <a href="#">Balance Task</a> </li>
        <li> <a href="#">Balance Training</a> </li>
        <li> <a href="#">Game</a> </li>
        <li> <a href="#">Link</a> </li>
        <li> <a href="#">Luna</a> </li>
        <li> <a href="#">Metro</a> </li>
        <li> <a href="#">Mode</a> </li>
        <li> <a href="#">Otto</a> </li>
        <li> <a href="#">Politan</a> </li>
      </ul>
      <!-- /.list-product-subnav -->
    </li>
    <li> <a href="#" class="list-product-cat"> Storage &amp; Accessories <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true"></span> </a>
      <ul class="list list-unstyled list-product-subnav">
        <li> <a href="#">Accessories</a> </li>
        <li> <a href="#">Personal Storage</a> </li>
        <li> <a href="#">Shared Storage</a> </li>
      </ul>
      <!-- /.list-product-subnav -->
    </li>
    <li> <a href="#" class="list-product-cat"> Training Tables <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true"></span> </a>
      <ul class="list list-unstyled list-product-subnav">
        <li> <a href="#">Modulus</a> </li>
        <li> <a href="#">Uni</a> </li>
      </ul>
      <!-- /.list-product-subnav -->
    </li>
    <li> <a href="w#" class="list-product-cat"> Workstations <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true"></span> </a>
      <ul class="list list-unstyled list-product-subnav">
        <li> <a href="#">Anvil Workstation</a> </li>
        <li> <a href="#">Axis Workstation</a> </li>
      </ul>
      <!-- /.list-product-subnav -->
    </li>
  </ul>
  <!-- /.list-product-nav -->
</div><!-- /.col -->

.list-product-nav a {
  font-size: 16px;
}
.list-product-nav a {
  display: block;
  text-decoration: none;
}
.list-product-nav a:hover,
.list-product-nav a:focus {
  color: #D52027;
}
.list-product-nav > li {
  border-bottom: solid 2px #fff;
}
.list-product-nav > li a.list-product-cat {
  color: #fff;
  padding: 10px 20px;
  background-color: #D52027;
}
.list-product-nav > li > a.list-product-cat:hover,
.list-product-nav > li > a.list-product-cat:focus {
  color: #000;
}
.list-product-subnav {
  display: none;
  border: solid 1px #e9e9e9;
}
.list-product-subnav li a {
  color: #000;
  padding: 6px 25px;
}

  /**
  * Accordion Menu
  *
  * https://codepen.io/maggiben/pen/rCIFu
  */
  $('.list-product-nav .list-product-cat').click(function(e) {
    e.preventDefault();
    $('.list-product-nav .list-product-subnav').slideUp(), $(this).next().is(":visible") || $(this).next().slideDown(),
    e.stopPropagation();

    var span = $(this).find('.glyphicon');
    span.toggleClass('glyphicon-menu-up glyphicon-menu-down');
  });