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.
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.