JQuery переключатель поиска не закрывается при нажатии, что это может быть?

Question

Мне просто интересно, почему моя панель поиска не закрывается, вот мой код:

$(".search-icon").click(function(event) {
  $(".search-box").toggle();
  $("input[type='text']").focus();
  event.stopPropagation();
});

.search-box {
  background: #E8E8E4;
  position: absolute;
  right: 0;
  left: 0;
  width: 80%;
  margin: 0 auto;
  background-color: #D9D9D9;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="search-icon" src="wp-content/themes/business-events-toronto/assets/search-icon.svg" />
<div class="search-box">
  <form role="search" method="get" class="search-form" action="http://localhost:8888/">
    <label>
      <span class="screen-reader-text">Search for:</span>
      <input type="search" class="search-field" placeholder="Search …" value="" name="s">
    </label>
    <input type="submit" class="search-submit" value="SUBMIT">
  </form>
</div>

Спасибо!