I have implemented two toggles in the code snippet below. I am trying to find a solution to determine if either search-open or nav-open are hidden, and if they are, then remove the no-scroll class from the body element.
$(document).ready(function() {
$('.nav-button').click(function() {
$('body').removeClass('search-open no-scroll');
$('body').toggleClass('nav-open no-scroll');
});
$('.search-button').click(function() {
$('body').removeClass('nav-open no-scroll');
$('body').toggleClass('search-open no-scroll');
});
});.nav-open {
opacity: 1;
visibility: visible;
background: rgba(76, 182, 204, 1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.search-open {
opacity: 1;
visibility: visible;
background: rgba(201, 40, 59, 1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.no-scroll {
overflow: hidden;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="search-button">Search</a>
</div>
<div>
<a class="nav-button">Navigation</a>
</div>
<br /><br /> Content
<br /> Content (repeated multiple times for demonstration purposes)
<br />