Menu icon Foundation
Multiple off-canvas

I have 2 off-canvas trigger on my site with 2 off-canvas menu's.

The triggers are in the <aside> tag and they are on top of the overal content.

But when i open my offCanvasMenu it opens correctly.

What i want to open my offCanvasSearch it needs to close the offCanvasMenu but i cant get that to work.

 

Can anyone help me with this?

 

    <aside class="columns shrink sidebar-left primary__bg">
        <button type="button" class="sidebar-left__button" data-toggle="offCanvasMenu">
            <div class="sidebar-left__icon">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
        <button type="button" class="sidebar-left__button" data-toggle="offCanvasSearch">
            <img src="assets/img/search.svg" alt="">
        </button>
    </aside>


    <!--Off canvas menu-->
    <div class="off-canvas position-left" id="offCanvasMenu" data-off-canvas>
        The first off-canvas menu
    </div>

    <!--Search canvas menu-->
    <div class="off-canvas search-menu position-left" id="offCanvasSearch" data-off-canvas>
        The second off-canvas menu
    </div>

offCanvas multiple

I have 2 off-canvas trigger on my site with 2 off-canvas menu's.

The triggers are in the <aside> tag and they are on top of the overal content.

But when i open my offCanvasMenu it opens correctly.

What i want to open my offCanvasSearch it needs to close the offCanvasMenu but i cant get that to work.

 

Can anyone help me with this?

 

    <aside class="columns shrink sidebar-left primary__bg">
        <button type="button" class="sidebar-left__button" data-toggle="offCanvasMenu">
            <div class="sidebar-left__icon">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
        <button type="button" class="sidebar-left__button" data-toggle="offCanvasSearch">
            <img src="assets/img/search.svg" alt="">
        </button>
    </aside>


    <!--Off canvas menu-->
    <div class="off-canvas position-left" id="offCanvasMenu" data-off-canvas>
        The first off-canvas menu
    </div>

    <!--Search canvas menu-->
    <div class="off-canvas search-menu position-left" id="offCanvasSearch" data-off-canvas>
        The second off-canvas menu
    </div>