Double sidebar on the left + Bootstrap 3

Question

I'm trying to create a fluid layout with at least one sidebar at the left. I know how to do this but now I would like to have an expandable sidebar next to the left sidebar. This is an image to explain:

In the left I have at first a logo and some navigation elements. When you click one the second navigation element I want to show a subnavigation. But how can I do this? Has someone come across an example of this? I really don't know where to start.

For one sidebar:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Navigation 1</a></li>
        <li><a href="#">Navigation 2</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

You can use a small jQuery script that looks up which sub navigation to show based on the links href, which contains the id. Like this DEMO:

$(function () {
    $(".main").on("click", "a", function () {
        $(".sub").removeClass("active");
        $($(this).attr("href")).addClass("active");
        console.log($(".sub ul"));
    });
});

If you use a HTML structure like this:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 col-sm-3 col-md-2 sidebar">
            <div class="logo">
                <img src="http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg" />
            </div>
            <ul class="nav nav-sidebar main">
                <li class="active"><a href="#sub1">Navigation 1</a></li>
                <li><a href="#sub2">Navigation 2</a></li>
                <li><a href="#sub3">Navigation 3</a></li>
            </ul>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 sidebar">
            <ul id="sub1" class="nav nav-sidebar sub active">
                <li><a href="#">Subnavigation 1.1</a></li>
                <li><a href="#">Subnavigation 1.2</a></li>
                <li><a href="#">Subnavigation 1.3</a></li>
                <li><a href="#">Subnavigation 1.4</a></li>
            </ul>
            <ul id="sub2" class="nav nav-sidebar sub">
                <li><a href="#">Subnavigation 2.1</a></li>
                <li><a href="#">Subnavigation 2.2</a></li>
                <li><a href="#">Subnavigation 2.3</a></li>
            </ul>
            <ul id="sub3" class="nav nav-sidebar sub">
                <li><a href="#">Subnavigation 3.1</a></li>
                <li><a href="#">Subnavigation 3.2</a></li>
                <li><a href="#">Subnavigation 3.3</a></li>
                <li><a href="#">Subnavigation 3.4</a></li>
                <li><a href="#">Subnavigation 3.5</a></li>
            </ul>
        </div>
    </div>
</div>

And some CSS

.logo {
    text-align: center;
}
.logo img {
    width: 50%;
    margin: 20px auto;
}
.sub {
    max-height: 0;
    height: auto;
    overflow: hidden;
    transition: max-height 0s;
    background: #fafafa;
}
ul.active {
    max-height: 400px;
    transition: max-height 1s 0.1s;
}