Trigger MDBootstrap side-nav with jQuery using custom hamburger button

Question

This was working fine: http://jsfiddle.net/musicformellons/ef76gud7/

Now I would like to use MDBootstrap instead of Bootstrap and so I have to alter this jQuery code:

$(document).ready(function () {
    $('#navbar').on('show.bs.collapse', function () {
        $('#nav-icon4').addClass('open');
    });
    $('#navbar').on('hide.bs.collapse', function () {
        $('#nav-icon4').removeClass('open');
    });
});

to work with this side-nav (using my own animated hamburger, see fiddle): http://mdbootstrap.com/javascript/sidenav/

I can trigger the side-nav with my hamburger by adding these to my hamburger button: data-activates="slide-out" class="button-collapse"

But then I loose the animation, since obviously the bootstrap navbar collapse is no longer shown.

How can I have my hamburger animation together with the new side-nav? Probably the cited jQuery code needs to be adjusted completely?!

So following is needed: (1) trigger MD bootstrap sidenav from another CSS button then its default one (2) the hamburger animation should stay 'in sync' with the sidenav. For instance: just using toggle it would probably loose sync as I had similar experiences before: Bootstrap navbar toggle not in sync with dropdown menu

You could use this fiddle as a starting point: http://jsfiddle.net/musicformellons/rto14vzp/2/

Comments regarding the fiddle:

• ignore the JS and CSS resource panel message; i tried adding
  mdbootstrap via the resource panel and it did not work whereas current approach does.
• the reference to mdbootstrap (via CDN url) refers to the free part of mdbootstrap (the side-nav is part of the free package).

Answer 1

The most direct answer to your question is that you need to chain the button animation and sideNav() opening triggers together with one jQuery statement. If you add .nav-icon-line to your spans, that would look like this:

  $("#nav-icon4, .nav-icon-line").click(function() {
    $("#nav-icon4").addClass('open');
    $(".button-collapse").sideNav();
  });

There is a lot more going on here that I can't really get into because the source of sideNav() isn't freely available with the framework you are using.

Something else to consider:

You'd need to reset the hamburger animation in the same way by using removeClass(). I'm not really sure how that would work because sideNav() is a black box. From what I can see, sideNav() seems to hide the sidebar when you click outside of it; figure out what function controls that and put $("#nav-icon4").removeClass('open'); into the function.

Codepen example (not fully functional yet, depends on figuing out what's happening inside of sideNav).