Mannu Nayyar Mannu Nayyar - 2 months ago 30
jQuery Question

Toggle search textbox on button click not working

I am trying to make a textbox which should appear when I click on the button. But when I click on the button the page loads and textbox is not displayed in place. What could be the problem? Should I change the button

type
or should I use
preventDefault
so that the page does not load?

My code:



$("#search-button").click(function(){
$("#search").slideToggle("slow");
});

.search-bar {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
/*padding: 2px 5px;*/
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-image: none;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 50%;
background-color: #00BCD4;
color: white;
}
.btn-circle:hover{
background-color: white !important;
color: #00BCD4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="search-bar" placeholder="Search" name="search" id="search" style="display: none;">
<div class="input-group-btn">
<button class="btn btn-default btn-circle" type="submit" id="search-button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</li>
</ul>





Please help me with this issue. And how to make the search button round? (Right now its round from right side only).

Thankyou

Answer

You may change the:

<div class="input-group-btn">

to:

<div class="input-group">

For your js you need to wrap it into document ready and prevent the default event:

$(function () {
  $("#search-button").click(function (e) {
    e.preventDefault();
    $("#search").slideToggle("slow");
  });
});
.search-bar {
  background: transparent;
  border: none;
  border-bottom: 1px solid #000000;
  /*padding: 2px 5px;*/
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-image: none;
}
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 50%;
  background-color: #00BCD4;
  color: white;
}
.btn-circle:hover{
  background-color: white !important;
  color: #00BCD4;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav navbar-nav navbar-right">
    <li>
        <form class="navbar-form" role="search">
            <div class="input-group">
                <input type="text" class="search-bar" placeholder="Search" name="search" id="search" style="display: none;">
            </div>
            <div class="input-group">
                <button class="btn btn-default btn-circle" type="submit" id="search-button"><i class="fa fa-search"></i></button>
            </div>
        </form>
    </li>
</ul>

Comments