I am in the process of designing a website that features a search icon within the navbar. When the user clicks on the search icon, it should disappear by applying the "hide" class to itself. Additionally, the hide class should be removed from a separate search bar div. Unfortunately, my jQuery implementation for this functionality is not functioning correctly. How can I address this issue?
Below is a snippet of the relevant code-
Bootstrap CSS-
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
Body-
<li class="hvr-bounce-to-bottom" id="navbar-search">
<a href="">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
</li>
<div class="input-group width-174px margin-top-8px hide" id="navbar-searchbar">
<input type="text" class="form-control width-100px" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" id="navbar-search" aria-hidden="true"></span></button>
</span>
</div>
JS-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="custom.js"></script>
$('#navbar-search').on('click', function(){
$(this).addClass('hide');
$('#navbar-searchbar').removeClass('hide');
});