Menu
This is all definitely over my head, but I had to ask. All I really want to do, is to start out with the text hidden, have only the SHOW button, and click on it to show the text. It is for a French Dictée site, where someone listens to a French phrase, writes what he thinks he hears in a form text field, then clicks the SHOW button to see if he got it right. I tried changing the P tag to visibility hidden, but then clicking on the SHOW button won't reveal it.
I searched under toggle, but none of the responses seemed to fit mine.
Here's the only answer from searching your site that comes close, but I can't make the text to start out hidden, then reveal it by clicking on the SHOW button.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Thanks for any help.
Barry
Okay, yes, I've seen that, but that still will open ANY P tag on the page with display:none. What I want is to have individual passages capable of being revealed by clicking a button. These HIDE and SHOW buttons open EVERY paragraph.
For example, on my site,
http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee
I have two passages, one in French and one in English. I'd like users to be able to SHOW the French, while keeping the English hidden, and vice versa SHOW the English while keeping the French hidden. Possible? No? Yes?
As always, thanks for any help.
Barry
996
To show and hide div on mouse click using jQuery, use the toggle() method. On mouse click, the div is visible and on again clicking the div, it hides.
Jquery hide and show can toggle element's display property only, not visibility. You can either make the element display:none initially or change the visibility instead of hide/show.
var $p = $('p');
$("#hide").click(function(){
$p.css('visibility', 'hidden');
});
$("#show").click(function(){
$p.css('visibility', 'visible');
});
or just:
$("#hide, #show").click(function(){
$('p').css('visibility', this.id == "show" ? 'visible' : 'hidden');
});
Demo
or in the initial style set
p{ /*This can vary based on which p you want to hide first*/
display: none; /*Instead of visibility*/
}
and just a shortened version.
$(document).ready(function () {
$("#hide, #show").click(function () {
$("p").toggle(this.id == "show");
});
});
Demo
Note that display property will take the element out of the page flow there wont be space reserved for it, in case of visibility you will see the empty space reserved by the element
55
try put the display:none will work
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p style="display:none">If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
