Bootstrap 3 - Toggle - 2 buttons, 2 elements - How to show/hide?

I'm building a layout template for devs to integrate into their AngularJS/Bootstrap application using Bootstrap 3.3.6. This layout features a left side nav contextual menu which slides over the top of the main page content when opened, or optionally can be 'pinned' open, which then pushes main content to the right.

The navigation itself is in the form of an unordered list containing two buttons. The idea is that when a button is clicked, the relevant div for the sub menu contents is toggled to display (using bootstrap 'collapse' and 'in') classes. Any other sub menu content div elements should be set to not display (without the 'in' class).

This is becoming tricky. If you simply click one button or the other exclusively to control it's relevant content element, it works fine, toggling display of the relevant content. However, if you click each button without clicking the same button again to close it's relevant content, the behavior of the content divs is unexpected, where the second nav button clicked overrides the behavior of the first and it's content persists despite clicking the first nav button again.

My expectation is that the menu buttons need to function as true toggles, where only the relevant content is displayed, and all other menu content divs are not displayed.

Below is the markup for the nav and it's relevant content divs:

<div class="filter-bar pull-left">

    <ul class="">

        <li><!-- NAV ITEM 1 -->
            <button type="button" 
            id="left-nav-toggle-menu" 
            class="left-nav-toggle mnc-filter-icn" 
            title="menu">
                <i class="fa fa-list-ul fa-fw"></i>
            </button>
        </li>

        <li><!-- NAV ITEM 2 -->
            <button type="button" 
            id="left-nav-toggle-filters" 
            class="left-nav-toggle mnc-filter-icn" 
            title="filters">
                <i class="fa fa-filter fa-fw"></i>
            </button>
        </li>

    </ul>

</div>

<div class="collapse push-menu-content"><!-- NAV ITEM 1 CONTENT -->

    <div class="clearfix">

        <button type="button" 
        class="close left-nav-pin pull-right" 
        aria-label="Pin">
            <i class="fa fa-thumb-tack"></i>
        </button>

    </div>

    <ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
    </ul>

</div>

<div class="collapse push-filter-content"><!-- NAV ITEM 2 CONTENT -->

    <div class="clearfix">

        <button type="button" 
        class="close left-nav-pin pull-right" 
        aria-label="Pin">
            <i class="fa fa-thumb-tack"></i>
        </button>

    </div>

    <ul>
        <li>Filter 1 Category</li>
        <li>Filter 2 Category</li>
        <li>Filter 3 Category</li>
    </ul>
</div>

Now the js function to toggle the nav content:

$(document).ready(function(){
    $("button#left-nav-toggle-menu").click(function(){
        $("div.collapse.push-menu-content").toggleClass("in");
    });
    $("button#left-nav-toggle-filters").click(function(){
        $("div.collapse.push-filter-content").toggleClass("in");
    });
});

I'm not a js or Bootstrap guru for that matter, I simply used the Bootstrap documentation (collapse and toggleClass) to create these functions. I need help from someone who knows Bootstrap in modifying them so that the nav buttons function as true toggles for the content using Bootstrap and jQuery's built in functionality.

Any help is much appreciated!

If I understand you correctly, you want to remove the .in class from any open divs:

$("button#left-nav-toggle-menu").click(function(){
    $("div.collapse.push-filter-content").removeClass("in");
    $("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
    $("div.collapse.push-menu-content").removeClass("in");
    $("div.collapse.push-filter-content").toggleClass("in");
});