1

I am making a website in which I have a search icon in the navbar.my search iconWhen the user clicks the search icon, it should hide itself using the "hide" class and it also should remove the hide class from a search bar div.my search bar divI did it using jQuery, but it isn't working. What should I do?

Here is my 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');
});
2
  • 1
    In your last code snippet you are adding class hide and next statement you are remove that same class I dont think it make any logic .. Feb 23, 2017 at 4:13
  • 1
    You need to prevent the default click action of the anchor element $('#navbar-search').on('click', function(e) { e.preventDefault(); $(this).addClass('hide'); $('#navbar-searchbar').removeClass('hide'); }); Feb 23, 2017 at 4:13

3 Answers 3

1

The problem is your icon is inside an anchor element, on click of the icon it triggers the default click nature of the anchor element.

You need to prevent that, you can do that by calling event.preventDefault()

$('#navbar-search').on('click', function(e) {
  e.preventDefault();
  $(this).addClass('hide');
  $('#navbar-searchbar').removeClass('hide');
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<ul>
  <li class="hvr-bounce-to-bottom" id="navbar-search">
    <a href="">
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </a>
  </li>

</ul>
<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>

0

You don't need to create a class. Simply use:

$('#navbar-search').hide()
// AND
$('#navbar-search').show()

Or if you want to toggle:

$('#navbar-search').toggle()

Also you're adding the class "hide" to #navbar-search, then trying to remove it from #navbar-searchbar. You need to use the same id for both, otherwise this won't work.

So, if I am getting this right, this would be your code:

$('#navbar-search').click(function(){
      $('#navbar-searchbar').toggle()
})
0

use hidden class or visible class for example:

this div visible just in xs

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.