Shahil Shahil - 2 months ago 23
HTML Question

Search Toggle from right

I am trying to achieve a simple search toggle from the right side over bootstrap. The issue i am facing is the click happens when the button is double clicked and the search input vanishes soon.

What I am trying to achieve is on click on a button, i need to toggle a div open and close on click of same button.

enter image description here

https://codepen.io/shahil/pen/XjdYdg



$(".search-btn").click(function () {
$(".search-input-elm").animate({ width: 'toggle' });
$(".search-input-elm").toggle();
});

.search { position:relative; }
.search .search-input-elm { position:absolute; top:10px; right: 37px; display: none; width: 175px;}

.search .search-btn {background:transparent;border:0;margin-top: 9px; float:right; }
.search .search-input{
width: 100%;
background: #fff;
color:#222;
border: 0;
padding: 6px 10px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
.search-submit {
position: absolute;
top: 3px;
right: 10px;
}
.search .search-btn:focus, header .search .search-input:focus { outline:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="search">
<div class="search-wrap">
<div class="search-input-elm">
<input class="search-input" type="text" placeholder="search.." />
<button class="search-submit">></button>
</div>

<button class="search-btn">Search BUTTON</button>
</div>
</div>




Answer

Remove $(".search-input-elm").animate({ width: 'toggle' }); from your js.

  $(".search-btn").click(function () {
	  	$(".search-input-elm").animate({ width: 'toggle' });
	  	
	});
.search { position:relative; }
.search .search-input-elm { position:absolute; top:10px; right: 37px;  display: none; width: 175px;}

.search .search-btn {background:transparent;border:0;margin-top: 9px; float:right;  }
.search .search-input{
    width: 100%;
    background: #fff;
    color:#222;
    border: 0;
    padding: 6px 10px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.search-submit {
    position: absolute;
    top: 3px;
    right: 10px;
}
.search .search-btn:focus, header .search .search-input:focus { outline:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="search">
                            <div class="search-wrap">
                                <div class="search-input-elm">
                                    <input class="search-input" type="text" placeholder="search.." />
                                    <button class="search-submit">></button>
                                </div>
                                
                                <button class="search-btn">Search BUTTON</button>
                            </div>
                        </div>