Second bootstrap jasny offcanvas push menu

Question

I´m using a Bootstrap Jasny offcanvas push navigation like here: http://www.jasny.net/bootstrap/examples/navmenu-push/

Now, I´d like to have an additional offcanvas navigation but I don´t know how to go about it as I have zero JS knowledge.

I only manage to create a second navigation and add a second toggle button that opens/closes the second navigation. However, it doesn´t close the first one when it´s open (and viceversa). Ideally, it would first close the first navigation completely and then open the second.

Any help would be appreciated. Thanks in advance!

<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
	<a class="navmenu-brand" href="#">Navigation1</a>
	<ul class="nav navmenu-nav">
		<li>stuff</a></li>
	</ul>
</div>
<div class="navmenu2 navmenu-default navmenu-fixed-left offcanvas">
	<a class="navmenu-brand" href="#">Navigation2</a>
	<ul class="nav navmenu-nav">
		<li><a href="../navmenu/">more stuff</a></li>
 	</ul>
</div>

<div class="navbar navbar-default navbar-fixed-top">
	<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
		navibutton1
	</button>
	<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu2" data-canvas="body">
		navibutton2
	</button>
</div>

https://jsfiddle.net/L2evyhuL/1/

Answer 1

All of my offcanvas panels are based on the '.navmenu' class. I made this general script that will close all open panels and will open the target panel as soon as the open panel is hidden. In this way I can have multiple panels but only one can be open.

$("[data-toggle='offcanvas']").on("click", function (e) {
    var target = $(this).data('target');
    var target_canvas = $(this).data('canvas');
    var items = $(".navmenu:not(" + target + "):visible");
    if (items.length > 0) {
        $.each(items, function (index, value) {
            $(value).on('hidden.bs.offcanvas', function () {
                $(this).unbind('hidden.bs.offcanvas');
                $(target).offcanvas({ canvas: target_canvas });
                $(target).offcanvas('show');
            });
            $(value).offcanvas('hide');
        });
        e.preventDefault();
        return false;
    }
});

The click event is for the elements that toggle the panel. For example:

<i class="fa fa-angle-double-left pull-right " aria-hidden="true" type="button" data-toggle="offcanvas" data-canvas="body" data-target="#navmenu"></i>