JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="nav-item">
              <a class="nav-link" href="#" data-toggle="search-form"><span class="material-icons">search</span>Search</a>
          </li>

  <div class="search-form-wrapper">
    <form action="{{ url('search/results') }}" class="search-bar" autocomplete="off">
        <input id="search" itemprop="query-input" type="search" aria-label="Search" name="q" placeholder="Search for Coupons, Stores & Deals" class="browser-default">
        <label for="search"><i class="material-icons">search</i></label>
    </form>
  </div>
</body>

JavaScript

$( document ).ready(function() {
    $('[data-toggle=search-form]').click(function(event) {
       alert('asdasdasdasd');
       event.stopPropagation();
      $('.search-form-wrapper').toggleClass('open');
    });
	console.log($('body'));
  $('body').click(function(event) {
    alert('asdasdadasdasdasdsaadsasd');
    if($('.search-form-wrapper').hasClass('open')) {
      $('.search-form-wrapper').removeClass('open');
      $('html').removeClass('search-form-open');
    }
  });
});