Show search on click and focus
HTML
<input type='search' placeholder='Search' class='search hidden' />
<button onclick='showSearch()'>
Search
</button>
CSS
.search {
font-size: 16px;
}
.hidden {
display: none;
}
JavaScript
const showSearch = () => {
const search = document.querySelector('.search');
search.classList.remove('hidden');
search.focus();
}