Hide/Show div on click and scroll
Question
I want to create a search form which is hidden and when we click the search icon that form appears and when user click away or scrolls the search form hides.
4 answers
solution1
0 2022-12-25 08:38:38
You have to use.onclick event in js and change display and visibility property in a 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, by default it should be hidden. But display: none is not nesseccary, depends on your website.
solution2
0 2022-12-25 08:40:52
Try this: Whenever you click on the image, "This is part of the div" appears in Red. Basically, you use Javascript to set/remove the hidden Attribute every time the user clicks the <img> item. Additionally, you change the <img> 's onclick Attribute to the opposite function( show_div()==>hide_div();hide_div()==>show_div() ):
//see html on where to put this show_div=function(){//Executed when the div ISN'T shown and the user clicks on the <img> tag document.getElementById("search_div").removeAttribute("hidden"); document.getElementById("search_icon").setAttribute("onclick","hide_div()");} hide_div=function(){//Executed when the div ISN'T shown and the user clicks on the <img> tag document.getElementById("search_div").setAttribute("hidden","true"); document.getElementById("search_icon").setAttribute("onclick","show_div()");}
<.DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4:01 Transitional//EN" "http.//www.w3.org/TR/html4/loose:dtd"> <html> <head> <title>Example Page</title> </head> <body> <img height="32" width="32" src="https.//cdn-icons-png.flaticon.com/512/3917/3917754.png" onclick="show_div()" id="search_icon"> <div id="search_div" hidden="true"> <font size=7 color="Red">This is part of the div</font> </div> <script type="text/javascript">//put the Javascript part here when copy-pasting this code </script> </body> </html>
You might want to take a look at the "hidden" attribute and the "click" event.
solution3
0 2022-12-25 09:41:54
i am using addEventListener to get if any click is happened you can use any section of the on the place of document to make it work for that particular section. ie: header
and then i am using classList.toggle to add and remove a particular class from the search input box. you can add CSS as per your need.
<style>
.search-bar{
display:none;
}
</style>
<div>
<input class="search-bar" id="search-bar" type="text" placeholder="search...">
<i class="search-icon">🔍 </i></div>
<script>
var searchbox=document.querySelector("#search-bar");
var searchIcon=document.querySelector(".search-icon");
document.addEventListener("click",searchBar);
function searchBar(){
searchbox.classList.toggle("search-bar");
}
</script>
solution4
0
This jquery function worked for me
'
$(document).ready(function(){
$(window).scroll(function(){
$("#search").fadeOut();
});
$("body").click(function(){
$("#search").fadeOut();
});
$("#btn").click(function(event){
event.stopPropagation();
$("#search").fadeToggle();
});
}); '
with this function when user scrolls the page the search bar will hide
below is a javascript version
document.addEventListener("DOMContentLoaded", function() {
window.addEventListener("scroll", function() {
document.getElementById("search").style.display = "none";
});
document.body.addEventListener("click", function() {
document.getElementById("search").style.display = "none";
});
document.getElementById("btn").addEventListener("click", function(event) {
event.stopPropagation();
var search = document.getElementById("search");
if (search.style.display === "none") {
search.style.display = "block";
} else {
search.style.display = "none";
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.