Hide and show text by click on div
Question
I have a question concerning an event onclick. I found this code during my research. My question is : even before the click the text already appears, is it possible to hide the text until we click on the actual button. And is it possible to have numerous onclick event working seperately that is o say only open the text above it? Thank you
<html> <head> <title>Show and hide div with JavaScript</title> <script> function showhide() { var div = document.getElementById("newpost"); if (div.style.display !== "block") { div.style.display = "block"; } else { div.style.display = "none"; } } </script> </head> <body> <div id="newpost"> <p>This div will be show and hide on button click</p> </div> <button id="button" onclick="showhide()">Click Me</button> </body> </html>
5 answers
solution1
3 2017-12-05 14:13:38
happy coding :)
function showhide() { var div = document.getElementById("newpost"); div.classList.toggle('hidden'); }
.hidden{ display : none; }
<html> <head> <title>Show and hide div with JavaScript</title> </head> <body> <!--if you want by default hidden then add class .hidden in new post --> <div id="newpost" class="hidden"> <p>This div will be show and hide on button click</p> </div> <button id="button" onclick="showhide()">Click Me</button> </body> </html>
solution2
1 2017-12-05 14:08:44
make it by default as none in style on display property.
<div id="newpost" style="display:none">
<p>This div will be show and hide on button click</p>
</div>
solution3
1 2017-12-05 14:12:24
Yes. In your stylesheet, have the #newpost div display: none and also add a modifier class, .visible with display: block . Lastly in your function you could toggle the .visible class via classList.toggle and you should be good to go:
var div = document.getElementById('newpost'); document.getElementById('button').addEventListener('click', showhide); function showhide() { div.classList.toggle('visible'); }
#newpost { display: none; } #newpost.visible { display: block; }
<button id="button">Click Me</button> <div id="newpost"> <p>This div will be show and hide on button click</p> </div>
solution4
0 2017-12-05 15:01:00
In JQuery you can add multiple on click events to a button like so:
$("#button").on("click", function(){ $("#newpost").toggle(); }); $("#button").on("click", function(){ $("#secondpost").toggleClass("bold"); }); #newpost{ display:none; } .bold{ font-weight:bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <html> <head> <title>Show and hide div with JavaScript</title> </head> <body> <div id="newpost"> <p>This div will be show and hide on button click</p> </div> <button id="button">Click Me</button> <p id="secondpost">toggle bold</p> </body> </html>
The first on click toggles the paragraph above. The second on click toggles a class on the last paragraph that makes it bold.
solution5
0 2020-07-04 12:06:00
html
<body>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">2.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details ">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">3.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
</body>
js
$(document).ready(function(){
$(".js--growth-step").click(function(event){
$(this).children(".step-details").slideToggle(500);
return false;
});
$(".js--growth-step .step-details").click(function(event) {
event.stopPropagation();
});
});
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.