0

I have a side navigation that toggles from left side pretty nicely on small devices. Everything is working perfect except when you click on a link in the sidebar; I wan't the navbar to hide and show the content div, but it's stuck and you have to click the toggle-button to remove the sidebar. What should I do to get the navbar to disappear on click without using collapse?

The Button

<button type="button" id="sideBtn" class="navbar-toggle leftToggle" data- 
toggle="offcanvas">
    <span class="sr-only">Menu</span>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
 </button>

This toggles the sidebar JS

$(document).ready(function() {
'use strict';
var trigger = $('.leftToggle'),
    isClosed = false;

function buttonSwitch() {
    if (isClosed === true) {
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
        }
    else {
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
    }
}

trigger.click(function() {
    exFunction(this);
    buttonSwitch();
});

$('[data-toggle="offcanvas"]').click(function () {
    $('#sideNav').toggleClass('toggled');
});
});

The exFunction() just makes the hamburger to an X.

Mia Raunegger
  • 221
  • 1
  • 2
  • 13
  • Possible duplicate of [Bootstrap 3 collapsed menu doesn't close on click](https://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click) – mooga May 02 '18 at 19:36

1 Answers1

0

You need to implement a function that closes the side menu when the content is clicked. Your current code only toggles the side menu when the menu button is clicked but not when the content of the menu is clicked.

Edit: Since you are using jQuery. You need an extra function for that(not necessary but will be simpler), it should look something like the following:

$(".div-element").on("click", function() { 
    $("#sideNav).toggleClass("toggled");
});

or

$(".bar1").click(function() { 
    $("#sideNav).toggleClass("toggled");
});

Basically we are selecting the class of the div element, setting it to a click event handler and giving it a function what to do with it. In this case the function is toggling the sidebar like menu(hamburger) button is.

I am assuming this should work, have not tested.

Elonas Marcauskas
  • 333
  • 5
  • 16