Toggle Overlay on Menu and Search

Question

I am trying to toggle a div overlay when either a menu button or search button is clicked. However, when I click one button and then the next button it turns off.

How do I keep the overlay on when it another button is clicked but close it when the menu or search is closed?

// menu
$('.hamburger-icon').click(function() {
  $('.search').removeClass('is-visible');
  $('.navbar').toggleClass('show-nav');
  $('.nav-items').toggleClass('db');
  $('.overlay').toggleClass('show-overlay');
});

// search
$('.search-icon').click(function() {
  $('.navbar').removeClass('show-nav');
  $('.nav-items').removeClass('db');
  $('.search').toggleClass('is-visible');
  $('.overlay').toggleClass('show-overlay');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="navbar db dt-xl w-100 border-box bg-white fixed absolute f6 d z-999">
  <div class="pa3 ph4-m ph5-l ph5-xl">
    <div class="center">
      <div class="nav-buttons db absolute right-0 mr3 mr5-ns mr4-m dn-xl fr">
        <a class="link dib grey hover-teal pv2 ph3 pointer search-icon" tabindex="0"><i class="fas fa-search"></i></a>
        <a class="link dib grey hover-teal pv2 ph3 ml2-ns pointer hamburger-icon" tabindex="0"><i class="fas fa-bars"><span class="sr-only">Toggle Menu</span></i></a>
      </div>
      <ul class="nav-items dn dtc-xl v-mid w-100 pa0 ma0 mt3 tl">
        <li></li>
      </ul>
    </div>
  </div>
  <div id="search" class="search fixed w-100 left-0 z-5">
    <form action="{{ url('/search/results') }}" class="w-100 h-100">
      <input type="search" name="q" placeholder="Search..." class="sans-serif w-100 h-100 ph3 ph4-m ph5-l ph5-xl br0 bn bg-white f4 f2-xl">
      <button class="sr-only" type="submit"><i class="fas fa-search h-100"></i>Submit</button>
    </form>
  </div>
</nav>

<div class="overlay pointer"></div>

Answer 1

Your issue here is you use the jQuery's toggleClass to toggle the overlay, the toggle() method will toggle between hide and show. Since you have toggle in both the menu and the search, when you click on one, then the other, the overlay gets turn off upon second click since it got toggled.

Use jQuery's hasClass() method to check if your menu or search have the css class that makes them visible, it will return a boolean value true or false.

You can do something like this:

https://www.w3schools.com/jquery/html_hasclass.asp

$('.hamburger-icon').click(function() {
$('.search').removeClass('is-visible');
$('.navbar').toggleClass('show-nav');
$('.nav-items').toggleClass('db');
$('.overlay').addClass('show-overlay');
if(!($('.navbar').hasClass('show-nav'))) {
    $('.overlay').toggleClass('show-overlay');
}
});

// search
$('.search-icon').click(function() {
$('.navbar').removeClass('show-nav');
$('.nav-items').removeClass('db');
$('.search').toggleClass('is-visible');
$('.overlay').addClass('show-overlay');
if(!($('.search').hasClass('is-visible'))) {
    $('.overlay').toggleClass('show-overlay');
}
});

Answer 2

You can easily solve it here the example my code:

Description: normally a button is clicked to toggle the target element and target your actions. I added a tiny logic here when menu button is clicked. Then, it adds new class menuActive and checks if the parent is Search active. when the active search bar. then first remove the searchActive class form the parent and then toggle similarly mention the previous line.

I hope this code will solve your prblem.

//when menu button click
jQuery(document).on('click','.menuButton', function(){
  if(jQuery('.parent').hasClass('searchActive')) {
     jQuery('.parent').removeClass('searchActive');
     jQuery('.parent .searchCont').slideUp(0);
  }
  jQuery('.parent').toggleClass('menuActive').children('.menu').slideToggle(200);
})

//when search button click
jQuery(document).on('click','.searchButton', function(){
  if(jQuery('.parent').hasClass('menuActive')) {
     jQuery('.parent').removeClass('menuActive');
     jQuery('.parent .menu').slideUp(0);
  }
  jQuery('.parent').toggleClass('searchActive').children('.searchCont').slideToggle(200);
})

.menu,
.searchCont { display:none}
.menuButton,
.searchButton {
  display: inline-block;
  width: 50px;
  height: 20px;
  margin: 5px;
  background: gray;
  border: 2px solid #fff;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="menuButton">menu</span>
<span class="searchButton">Search</span>

<div class="parent">
  <div class="menu">
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="searchCont">
      <input type="text" placeholder="search" />
      <input type="submit" vlaue="find">
  </div>
</div>

= = = = Thank you = = = =