Keeping Bootstrap 3 dropdown open when clicked with slide up & down animation

Question

I am using a Bootstrap dropdown as a vertical menu coming from a button clicked on the navbar. I added some jQuery to allow the dropdown to slide down smoothly rather than pop into existence, but now I've run into the problem of the dropdown closing when anywhere (inside or outside) is clicked.

Some of the "links" in the dropdown menu are actually accordion style headers that show a list of pages when clicked, so I need the dropdown to stay open when there is a click within.

My main problem is that I have found a few solutions that work, but they seem to overwrite the smooth slide functionality of the dropdown.

This is the code I'm using for the slide down:

$('.dropdown').on('show.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});

$('.dropdown').on('hide.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();

});

and this is the general structure of my menu:

<div class="dropdown">
    <button type="button" class="dropdown-toggle nav-tog" id="dropdownMenu1" data-toggle="dropdown">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-bars" style="color: #A05317; font-size: 30px;"></i>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="mainMenu">
            <ul id="main-nav">
                <li class="nav-item"><a href="#">NAV HEADER (accordion)</a>
                    <ul>
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                        <li><a href="#">Sub Nav 4</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="#">NAV HEADER (accordion)</a>
                    <ul>
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                        <li><a href="#">Sub Nav 4</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="#">NAV HEADER</a></li>
                <li class="nav-item"><a href="#">NAV HEADER</a></li>
                <li class="nav-item"><a href="#">NAV HEADER</a></li>
                <li class="nav-item"><a href="#">NAV HEADER</a></li>
                <li class="nav-item"><a href="#">NAV HEADER (accordion)</a>
                    <ul>
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                        <li><a href="#">Sub Nav 4</a></li>
                    </ul>
                </li>
             </ul>
        </ul>
    </div>

Any help would be greatly appreciated!