JavaScript function is only open one offcanva menu

I built two offcanvas sidebars, one of the is on the right side and includes the normal menu off the webapp, the second one should be a notification sidebar, the problem is that, the left one is working perfect. When I click on the hamburger icon, it will opens the left sidebar, but when I click on the other icon, nothing happens, the right sidebar will not open, and Google Chrome console, shows no errors.

First one is the links wish opens the left sidebar, which works so far. The right one is for the notification sidebar, which doesn’t open.

jsfiddle

<a href="#" id="open-pulse-sidebar"><i class="icon-menu circle-icon"></i></a>

<a href="#" id="open-notification-sidebar"><i class="icon-globe circle-icon"></i></a>

The Html of the left working sidebar

<div class="pulse-sidebar">
    <div class="sidebar-bg clearfix">
        <div class="sidebar-profile">
            <img src="img/users/avatar.jpg" class="sidebar-img" alt="Candice Swanepoel" title="Candice Swanepoel" />
            <h5>Candice Swanepoel</h5>
        </div>
    </div>
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Models</a></li>
        <li><a href="#">Kunden</a></li>
        <li><a href="#">Finanzen</a></li>
        <li><a href="#">Mitarbeiter</a></li>
        <li><a href="#">Einstellung</a></li>
    </ul>
    

    <div class="sidebar-logout">
        <a href="#">
            <i class="icon-logout circle-icon"></i>
            <h5>Logout</h5>
        </a>
    </div>
</div>

and the html of the right sidebar – it has dummy content inside

<div class="notification-sidebar">
    
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Models</a></li>
        <li><a href="#">Kunden</a></li>
        <li><a href="#">Finanzen</a></li>
        <li><a href="#">Mitarbeiter</a></li>
        <li><a href="#">Einstellung</a></li>
    </ul>
    
</div>

Here is my JavaScript and the CSS for them

// Toggle Pulse Sidebar

$('#open-pulse-sidebar').click(function() {
  $('.pulse-sidebar').toggleClass('active')
})

$(document).click(function(e) {
  var sidebar = $(".pulse-sidebar, #open-pulse-sidebar");
  if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
    sidebar.removeClass('active')
  }
});

// Toogle Notification Sidebar

$('#open-notification-sidebar').click(function() {
  $('.notification-sidebar').toggleClass('active')
})

$(document).click(function(e) {
  var sidebar = $(".notification-sidebar, #open-notification-sidebar");
  if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
    sidebar.removeClass('active')
  }
});

CSS

.pulse-sidebar {
  height: 100%;
  width: 19.24em;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transform: translateX(-120%);
  transition: all 0.4s ease-in;
  -webkit-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
}

.notification-sidebar {
  height: 100%;
  width: 19.24em;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  background-color: #fff;
  overflow-x: hidden;
  transform: translateX(120%);
  transition: all 0.4s ease-in;
  -webkit-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
}

Answer

The problem is, that your .active css class is only validable for the first sidebar that you have. You have to create a second one for example like this. This will fix it

CSS

.notification-sidebar.active{
  transform: translateX(0); 
}

Advertisement

Answer