CODEWITHSUNDEEP
javascriptjquerycss
Barry Glick
Barry Glick

Reputation: 81

Start with Text hidden, show text onclick

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

Upvotes: 8

Views: 31178

Answers (3)

Ayushi Jha
Ayushi Jha

Reputation: 4023

I was looking for the answer as well, however, what worked for me was this small code of JQuery:

<div style="display: none;" id="hiddenText">This is hidden</div>
<a href="#" onclick="$('#hiddenText').show(); return false;">Click here to show hidden 
text</a>

Demo

Source

Upvotes: 0

PSL
PSL

Reputation: 123739

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

Upvotes: 5

Luan Castro
Luan Castro

Reputation: 1184

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>

Upvotes: 1

Related Questions