CODEWITHSUNDEEP
javascriptvisibility
Emelie Torefalk
Emelie Torefalk

Reputation: 21

javascript - Show/Hide text

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!

Upvotes: 2

Views: 21692

Answers (4)

LifeiSHot
LifeiSHot

Reputation: 139

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

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

Upvotes: -1

Fecious Finny
Fecious Finny

Reputation: 1

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++.

Upvotes: 0

Wouter Dorgelo
Wouter Dorgelo

Reputation: 11978

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

Because you're new to programming, you might want to watch these video series about jQuery: http://blog.themeforest.net/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 :-)

Upvotes: 3

GG.
GG.

Reputation: 21834

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. :)

Upvotes: 1

Related Questions