I am running a script when the search icon is clicked the search input is displayed with toggle but I cannot get this running so that the input autofocus is active so the user can type straight into the search box
$(document).ready( function(){
$("#velaSearchTop").each( function(){
$("#velaSearchIcon").click( function(){
$("#velaSearchbox").toggleClass("show");
});
$(".btn-close").click( function(){
$("#velaSearchbox").removeClass("show");
});
});
});
</script>
<div id="velaSearchTop">
<span id="velaSearchIcon" class="fa fa-search"></span>
<form id="velaSearchbox" class="formSearch" action="/search" method="get">
<input type="hidden" name="type" value="product">
<input class="velaSearch form-control" class="test" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" autofocus />
<button id="velaSearchButton" class="btnVelaSearch" type="submit" >
<span><i class="fa fa-search"></i></span>
<span class="btnSearchText">{{ 'general.search.submit' | t }}</span>
</button>
<div class="btn-close"><span class="fa fa-close"></span></div>
</form>
</div>```
If you're using jquery.js you can write like this
$(function () {
$("#velaSearchIcon").click(function () {
$("#velaSearchbox").show();
$("input[name='q']").focus();
});
$(".btn-close").click(function () {
$("#velaSearchbox").hide();
});
});