visibility - javascript - ShowHide text - Stack Overflow

admin管理员组

文章数量:1304537

I'm not good with programming, so I really would like some help.

I need a code that shows and hides a text when you click on a certain sentence. I have searched a lot over the Internet but I can't find something that works. Here is one of the codes that I have found. I would be happy if someone could help me and give me a working code!

I'm not good with programming, so I really would like some help.

I need a code that shows and hides a text when you click on a certain sentence. I have searched a lot over the Internet but I can't find something that works. Here is one of the codes that I have found. I would be happy if someone could help me and give me a working code!

• javascript
• visibility

Share Improve this question Follow edited Dec 1, 2011 at 19:27 Ken White 126k1515 gold badges236236 silver badges464464 bronze badges asked Dec 1, 2011 at 19:05 Emelie TorefalkEmelie Torefalk 2111 gold badge11 silver badge22 bronze badges 2

• 1 Hi Emelie. This site is intended to help those who have already put in a good faith effort to solve a problem, but have e up a bit short for whatever reason. Can you post the code that you have written and which is not working? You mention that you would post it but I don't see it there. When you paste it in you can indent it by 4 spaces so that it formats correctly. – Ed Swangren Commented Dec 1, 2011 at 19:09
• What mark-up are you working with? What elements are the various sentences wrapped in, what id or class names do they have? Please, if you can, post code that shows what you've got. – David Thomas Commented Dec 1, 2011 at 19:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can use jQuery's Toggle: http://api.jquery./toggle/

Because you're new to programming, you might want to watch these video series about jQuery: http://blog.themeforest/screencasts/jquery-for-absolute-beginners-video-series/

Alternative solution without jQuery:

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>Hello world</h1></div>

You can also have a look at the related questions on the right of this page :-)

You can use .toggle() function from jQuery, a JavaScript framework:

HTML:

<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>

jQuery:

$(function(){
    $('p').click(function(){
        $(this).toggle();
    });
});

But if you hide the text, you can't click on to redisplay it. So you need to find a clickable visual aid to redisplay the text. I let you think about it. :)

I'm not exactly sure that this would work, but you could try putting a blank picture over the text you want to hide and when you want to view the text, just remove the blank square. I'm not exactly 100% sure it would work though. I'm not as good at javascript as I am with C++.

Perhaps you missed the world's best example on this website: https://www.w3schools./howto/howto_js_toggle_hide_show.asp

The tutorial shows using pure HTML with JavaScript to do the job!

本文标签： visibilityjavascriptShowHide textStack Overflow