I have a navigation menu on my website that is divided into two sections.
There is a left panel and a right panel which slide in from the side when their respective buttons are clicked, covering the browser window.
The functionality of sliding in the panels is working fine for me at the moment.
However, I am struggling with creating conditional logic for the function that checks:
- 'If the left panel is 'active' / 'visible' and the right panel button is clicked, slide out the left panel while sliding in the right panel.'
and vice versa.
You can find the code snippet here and below is the actual code:
NOTE: I have attempted to trigger an alert when the class name .panel--oneBtn.is-active is present but no alert is being displayed. Thank you
HTML
<div class="wrapper">
<div class="nav_header">
<div class='nav_header_link_wrap abso-left panel--oneBtn'>
<span class="nav_header_link abso-left open">Eat.Drink.Sleep</span>
<span class="nav_header_link abso-left close">Close</span>
</div>
<div class='nav_header_link_wrap abso-right panel--twoBtn'>
<span class="nav_header_link abso-right open">Bookings/Contact</span>
<span class="nav_header_link abso-right close">Close</span>
</div>
</div>
<div class="menuPanel panel--one"></div>
<div class="menuPanel panel--two"></div>
</div>
JS
function navSlider(){
var $buttonOne = $('.panel--oneBtn'),
$buttonTwo = $('.panel--twoBtn');
$buttonOne.on('click', function() {
$('.panel--one').toggleClass('is-visible');
$buttonOne.find('.open').toggleClass('is-gone');
$buttonOne.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
$buttonTwo.on('click', function() {
$('.panel--two').toggleClass('is-visible');
$buttonTwo.find('.open').toggleClass('is-gone');
$buttonTwo.find('.close').toggleClass('is-visible');
$(this).toggleClass('is-active');
});
if ( $buttonOne.hasClass('is-active') ){
alert('Left is active');
} else if ($buttonTwo.hasClass('is-active') ){
alert('Right is active');
}
}
navSlider();