hide show with support of html5
Question
I need some help. when I click THIS IS 1 and THIS IS 2 the input box comes my problem is. I want to click THIS IS 1 and brings input box to THIS IS 1 not clicking THIS IS 2 and still brings input box to THIS IS 1. so I want when I click THIS IS 1 input box comes below THIS IS 1 when I click THIS IS 2 the input box comes below to THIS IS 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<span onclick="MFunction()">THIS IS 1</span>
<p></p>
<span onclick="MFunction()">THIS IS 2</span>
<div id="showhide" style="display:none;">
<input type="text" required>
<br></br>
<button class="btn btn-md-2 btn-primary">submit</button>
</div>
<script>
function MFunction() {
var x = document.getElementById("showhide");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
1 answers
solution1
1 2018-10-30 19:53:19
If you want to use same showhide div to display under the clicked element than you might need to use insertBefore on click.
See Snippet below:
function MFunction(event) { var x = document.getElementById("showhide"); if (x.style.display === "none") { x.style.display = "block"; } x.parentNode.insertBefore(x, event.target.nextSibling); } document.addEventListener('click', function(event){ if(event.target.className.includes("thisis")){ MFunction(event); } }); //document.getElementById("thisis1").addEventListener("click", MFunction); //document.getElementById("thisis2").addEventListener("click", MFunction);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <span id="thisis1" class="thisis">THIS IS 1</span> <p></p> <span id="thisis2" class="thisis">THIS IS 2</span> <p></p> <span id="thisis3" class="donotshow">DO NOT SHOW ON THIS IS</span> <div id="showhide" style="display:none;"> <input type="text" required> <br><br> <button class="btn btn-md-2 btn-primary">submit</button> </div> </body>
You can also test it here
Update 1:
I have updated the answer to add single click event for multiple elements. You can test it here
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.