Hide/show div on click and scroll

Question

I want to create a hidden search form that appears when we click on the search icon and hides when the user clicks or scrolls.

Answer 1

You have to use .onclick event in js and change the display and visibility properties in the function. For example:

document.getElementById("searchIcon").onclick = searchFunction
function searchFunction(){
   const search = document.getElementById("searchForm");
   search.style.display = "block";
   search.style.visibility = "visible";
}

Of course, it should be hidden by default. But display:none is not required and depends on your website.