Q:

Nested accordion list in Bootstrap 3 not deselecting, when selecting parent

I'm having an issue with Bootstrap 3 where I'm nesting a nav list menu using the accordion. However, it's not behaving as I'd hoped. There are two scenarios I can't seem to figure out:

I select Main 1, then open Main 2 and select Sub 1 (Main1 should
be deselected)
I click Sub 1, then select Main 1 (Sub 1 should be
deselected, and Main 2 should collapse)

Everything else seems to work as intended, but I wonder whether I'm operating outside the functionality of Bootstrap 3, or just doing it wrong.
Failing that, perhaps there's a tweak to the Bootstrap JS I can perform to get the intended functionality?
Here's what I have so far:
<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
<style>
/* sidenav deselected */
.bs-sidebar .nav > li > a {
    color: #000000;
    padding: 10px;
    margin: 5px 0px 5px 0px;
}
/* sidenav selected */
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a,
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
    color: #ffffff;
    background-color: #205f9f;
    text-decoration: underline;
    border-radius: 4px;
    padding: 10px;
    margin: 5px 0px 5px 0px;
}
/* sidenav 2nd layer overwrites */
.bs-sidebar .nav .nav > li > a,
.bs-sidebar .nav .nav > li > a:hover {
    font-size: 90%;
    padding: 5px 0px 5px 30px;
    margin: 5px 5px 5px 5px;
}
</style>

</head>
<body>

    <div class="panel-body">
        <div class="bs-sidebar">
            <ul class="nav bs-sidenav">
                <li><a href="#Main1" data-toggle="tab">Main 1</a></li>
                <li><a href="#Main2" data-toggle="collapse">Main 2 <b class="caret"></b></a>
                    <ul class="subnav nav panel-collapse collapse" id="Main2">
                        <li><a href="#sub1" data-toggle="tab">Sub 1</a></li>
                        <li><a href="#sub2" data-toggle="tab">Sub 2</a></li>
                        <li><a href="#sub3" data-toggle="tab">Sub 3</a></li>
                    </ul>
                </li>
                <li><a href="#Main3" data-toggle="tab">Main 3</a></li>
            </ul>
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Many thanks for your help.

A:

Got there in the end, it seems some additional JavaScript is required to get it working:
<script type='text/javascript'>
        $(window).load(function(){
            // when nav list is clicked
            $('.bs-sidebar .nav > li > ul > li > a').on('click',function(){
                // remove child selection
                $(this).closest('.bs-sidenav').find('.active').removeClass('active');
            });
            // when parents are clicked 
            $('.nav.bs-sidenav > li > a').on('click',function(){
                // if this selection is a nav item
                if ($(this).attr('data-toggle') == "tab"){
                    // deactivate the old sub item
                    $(this).closest('.nav.bs-sidenav').find('.active').removeClass('active');
                }
                // collapse subnav
                $('.subnav.in').collapse('hide');
            });
        });  
</script>

There may be a better method, but this covers the two scenarios above by putting in some additional click conditions. Now, it collapses correctly when navigating to another menu/submenu item, and only deselects when a nav item is clicked (not when I'm just 'browsing' through the collapsed menus)

