How to Hide and Show a Text in JavaScript?

newbe123 · November 19, 2010

I am having problem with an assignment and this is what I have to do:

Use JavaScript to do so when the page loads, all the poems to be invisible. When the user clicks on a poem title in the menu, then the corresponding poem made visible. Other poems remain invisible. When the user clicks on another poem title as the poem becomes visible. The latest visual poem then becomes invisible. The rule is that only one poem is visible at a time. (Hop u get it)

What I am having problem with is that I have managed to hide the text by clicking on a link but how can I do the same to show the text again.

And in this assignment I can't make any changes in the HTML document.

(some of the text is in Swedish but not the JS codes.... sorry)

HTML code:

<link rel="stylesheet" href="style/screen.css" type="text/css" media="screen" title="no title" charset="utf-8" />
	<script src="scripts/mittscript.js" type="text/javascript" charset="utf-8"></script>
        
    </head>
    <body>

        <div id="sida">
            <div id="sidhuvud">
                <h1>RUBRIK</h1>
                <h2>Dikter av Erik Axel Karlfeldt</h2>
            </div>

		<div id="innehallsforteckning">
                <h2>Innehåll</h2>
                <ul>
                    <li><a href="#d1">I höststormen</a></li>
                    <li><a href="#d2">Som en dröm</a></li>
                    <li><a href="#d3">Fru Lena på Trojenborg</a></li>
                    <li><a href="#d4">Ungsommar</a></li>
                </ul>
            </div>

            <div id="dikter">

                <div class="dikt" id="d1">
                    <h2>rubrik</h2>
                    <p>
                  texttext1<br />
                  texttext
                    </p>
                    <p class="ar">
                        (1895) 
                    </p>
                <p class="aterga">
                <a href="#">Till sidans början</a>
                </p>
                </div>

                <div class="dikt" id="d2">
                    <h2>rubrik</h2>
                    <p>
                  texttext2<br />
                  texttext
                    </p>
                    <p class="ar">
                        (1895) 
                    </p>
                <p class="aterga">
                <a href="#">Till sidans början</a>
                </p>
                </div>

                <div class="dikt" id="d3">
                    <h2>rubrik</h2>
                    <p>
                  texttext3<br />
                  texttext
                    </p>
                    <p class="ar">
                        (1895) 
                    </p>
                <p class="aterga">
                <a href="#">Till sidans början</a>
                </p>
                </div>

                <div class="dikt" id="d4">
                    <h2>rubrik</h2>
                    <p>
                  texttext4<br />
                  texttext
                    </p>
                    <p class="ar">
                        (1895) 
                    </p>
                <p class="aterga">
                <a href="#">Till sidans början</a>
                </p>
                </div>

            </div>

            <div id="sidfot">
                <p>
                   sidfoten
                </p>

            </div>
        </div>
    </body>
</html>

JS CODES:

// Skriv all din kod i denna fil och lämna in den. Du ska inte inkludera andra filer.


window.onload = function() {
    hideDikter();
    setupHideLinks();
    setupLinks();
}

// lägger till clickHandlers på alla länkar i innehallsforteckning
function setupLinks() {
    var links = document.getElementById('innehallsforteckning')
        .getElementsByTagName('a');   
    for (var i=0; i < links.length; i++) {
        links[i].addEventListener('click', link_handleClick, false);
    }
}

// lägger in en 'dölj information' länk som döljer parentNode dikten när man klickar.
function setupHideLinks() {
    var dikter = document.getElementById('dikter')
        .getElementsByClassName('dikt');
        
    function a_handleClick(e) {
        hideDikt(e.currentTarget.parentNode);
    }
    
    for (var i=0; i< dikter.length; i++) {
        var a = document.createElement('a');
        a.addEventListener('click', a_handleClick, false);
        a.innerHTML = 'dölj information';
        dikter[i].appendChild(a);
    }

}
// tar fram id från länken som klickats, ser till så att alla dikter döljs innan den visar dikten ifråga
function link_handleClick(e) {
    var link = e.currentTarget;
    var id = link.href.substring(link.href.lastIndexOf('#')+1)
    var dikt = document.getElementById(id);
    hideDikter();
    showDikt(dikt);
}

// döljer enskild dikt
function hideDikt(dikt) {
    dikt.style.display = 'none';
}
function showDikt(dikt) {
    dikt.style.display = 'block';
}

// döljer ALLA dikter
function hideDikter() {
    var dikter = document.getElementById('dikter')
        .getElementsByClassName('dikt');
    for (var i=0; i< dikter.length; i++) {
        hideDikt(dikter[i]);

    }

}

edit: wrapped code in

 blocks[/i]

seanlim · November 19, 2010

have a look at this: http://www.phpfreaks.com/forums/javascript-help/help-please-315400/ almost similar requirements, just that you can't change your html.

also, I'm not sure if addEventHandler works perfectly (if at all) in IE. I've just had to do something similar and had to use "object.onclick" for cross-browser compatibility

newbe123 · November 19, 2010

Thank you, but it's just not working. I can't even think anymore. Don't know what to do??

I want it to hide and show the poems and I also want it to add a link labeled "Show poem information" on each poem that when clicked on displays the number of sections and number of breaks in the poem. When information is displayed, there should be a "Hide poem information" instead.

I have the hide part but don't know what to do with the rest??? please help

my brain is't cooperating

seanlim · November 19, 2010

JS Code:

window.onload = function() {
    hideDikter();
    setupHideLinks();
    setupLinks();
}

// lägger till clickHandlers på alla länkar i innehallsforteckning
function setupLinks() {
    var links = document.getElementById('innehallsforteckning')
        .getElementsByTagName('a');   
    for (var i=0; i < links.length; i++) {
	links[i].onclick = link_handleClick; 
    }
}

// lägger in en 'dölj information' länk som döljer parentNode dikten när man klickar.
function setupHideLinks() {
    var dikter = document.getElementById('dikter')
        .getElementsByClassName('dikt');
        
    function a_handleClick(e) {
        hideDikt(e.currentTarget.parentNode);
	return false;
    }
    
    for (var i=0; i< dikter.length; i++) {
        var a = document.createElement('a');
	a.onclick = a_handleClick;
        a.innerHTML = 'dölj information';
        dikter[i].appendChild(a);
    }
    
}
// tar fram id från länken som klickats, ser till så att alla dikter döljs innan den visar dikten ifråga
function link_handleClick(e) {
    var link = e.currentTarget;
    var id = link.href.substring(link.href.lastIndexOf('#')+1)
    var dikt = document.getElementById(id);
    hideDikter();
    showDikt(dikt);
return false;
}

// döljer enskild dikt
function hideDikt(dikt) {
    dikt.style.display = 'none';
}
function showDikt(dikt) {
    dikt.style.display = 'block';
}

// döljer ALLA dikter
function hideDikter() {
    var dikter = document.getElementById('dikter')
        .getElementsByClassName('dikt');
    for (var i=0; i< dikter.length; i++) {
        hideDikt(dikter[i]);
   
    }

}

HTML Code:

       <div id="sida">
            <div id="sidhuvud">
                <h1>RUBRIK</h1>
                <h2>Dikter av Erik Axel Karlfeldt</h2>
            </div>
         
         <div id="innehallsforteckning">
                <h2>Innehåll</h2>
                <ul>
                    <li><a href="#d1">I höststormen</a></li>
                    <li><a href="#d2">Som en dröm</a></li>
                    <li><a href="#d3">Fru Lena på Trojenborg</a></li>
                    <li><a href="#d4">Ungsommar</a></li>
                </ul>
            </div>

            <div id="dikter">

                <div class="dikt" id="d1">
                    <h2>rubrik</h2>
                    <p>
                  texttext1<br />
                  texttext
                    </p>
                    <p class="ar">
                        (1895) 
                    </p>
                <p class="aterga">
                <a href="#" onclick="hideDikt(this.parentNode.parentNode)">Till sidans början</a>
                </p>
                </div>

                <div class="dikt" id="d2">
                    <h2>rubrik</h2>
                    <p>
                  texttext2<br />
                  texttext
                    </p>
                    <p class="ar">
                        (1895) 
                    </p>
                <p class="aterga">
                <a href="#" onclick="hideDikt(this.parentNode.parentNode)">Till sidans början</a>
                </p>
                </div>

                <div class="dikt" id="d3">
                    <h2>rubrik</h2>
                    <p>
                  texttext3<br />
                  texttext
                    </p>
                    <p class="ar">
                        (1895) 
                    </p>
                <p class="aterga">
                <a href="#" onclick="hideDikt(this.parentNode.parentNode)">Till sidans början</a>
                </p>
                </div>

                <div class="dikt" id="d4">
                    <h2>rubrik</h2>
                    <p>
                  texttext4<br />
                  texttext
                    </p>
                    <p class="ar">
                        (1895) 
                    </p>
                <p class="aterga">
                <a href="#" onclick="hideDikt(this.parentNode.parentNode)">Till sidans början</a>
                </p>
                </div>

            </div>

            <div id="sidfot">
                <p>
                   sidfoten
                </p>

            </div>
        </div>
    </body>
</html>

newbe123 · November 19, 2010

I really appreciate your help but what is happening here now is the same as before (isn't it?) where the poem is hidden but you can not click to show the poem (poems) again. like when you click hide information it hides and there is a link show information and it shows the poem again.

This is my first time with JavaScript and I am sorry for the inconvenience.

I also have to add a link labeled "Show poem inormation" on each poem that when clicked on displays the number of sections and number of breaks in the poem. When information is displayed, there should be a "Hide poem information" instead.

seanlim · November 19, 2010

i've reread your post from the beginning but still can't understand what exactly you are trying to do. your first post didn't even mention these extra information.

where is this poem information stored anyway? and where do you want to display them? i don't see a link labeled "show poem inormation"? i only see a.innerHTML = 'dölj information'; which google translate tells me is hide information.

doesn't help that all the tag names are in swedish, the comments are in swedish, plus all your content is test data... i can't figure out what content goes where! maybe someone who can understand swedish will be better equipped to help you

newbe123 · November 19, 2010

I am really sorry...Here is a zip file so you can see it all, this is a really stupid assignment.

I have tried a Swedish portal but they just ask stupid things and not really helping. I had a problem with php before and I got the help I needed here.

[attachment deleted by admin]

seanlim · November 19, 2010

Okay, correct me if i'm wrong:

when the title is clicked, the poem is displayed. attached to the poem is a button "show information". when that button is clicked, the poem's information is shown and the button changes to "hide information". and when "hide information is clicked, it hides the poem's information. is this what you are trying to achieve? Do you require any other functionalities?

And you still haven't answered my question: where is the poem's information located? "number of sections and number of breaks"? I don't see them anywhere in your HTML file

newbe123 · November 19, 2010

Yes, that is exactly what I have to do.

The zip file I've attached contains a HTML document in a folder named uppgift4 where you can see all the poems and everything else. (may not be changed)

Uppgift4/ scripts/karlfeldt.js is where the JS code is going to be (contains the code I've written so far)

I really appreciate your help and am sorry for the inconvenience.

[attachment deleted by admin]

seanlim · November 19, 2010

for the third and hopefully final time, where is the poem's information? I can see the poem, but where is the "number of sections and number of breaks" you want to display?

maybe it is in swedish or god-knows-what format, but i can't find it. point me to the line

attaching the zip file again isn't much help

newbe123 · November 19, 2010

I just saw that it is not allowed to use innerHTML.

I have changed the code and I do not know if that makes any difference now.

I am so new with this and I'm so confused....

I don't know how to answer your question....

This is my new code and it's not right like it should be and the section called "hello" but I can not get it to go in the right place, it should be somewhere in the selected poem..

....I am pulling my hair now

setupLinks()

taBort()

visaDikt()

}

function taBort() {

var uppTill = document.getElementsByClassName('aterga');

while (uppTill.length > 0)

uppTill.item(0).parentNode.removeChild(uppTill.item(0));

}

function hamtaUrl(anchor) {

var link = anchor.getAttribute('href');

return link.substring(link.indexOf('#') + 1);

}

function visaDikt(id) {

var dikter = document.getElementById('dikter');

var dikt = dikter.getElementsByTagName('div');

for (var i=0; i < dikt.length; i++) {

var valdDikt = dikt;

toggleVisibility(id);

}

var para = document.createElement("p");

var text = generateTextNode(valdDikt);

para.appendChild(text);

var container = document.getElementsByClassName('dikt')[0];

container.appendChild(para);

para.onclick = function() {

}

function toggleVisibility (id) {

if (dikt.id == id)

valdDikt.style.display = 'block';

else

valdDikt.style.display = 'none';

}

function generateTextNode(valdDikt) {

var text = "poems";

return document.createTextNode(text);

};

}

function setupLinks() {

var lankDiv = document.getElementById('innehallsforteckning');

var lank = lankDiv.getElementsByTagName('a');

for(var i=0; i<lank.length; i++)

lank.setAttribute('onclick', 'visaDikt(\'' +

hamtaUrl(lank) +

'\'); return false;');

}

seanlim · November 19, 2010

i feel your exasperation. believe me. its 3:30am over here.

I just saw that it is not allowed to use innerHTML.

why not? there shouldn't be any problems using innerHTML.

This is my new code and it's not right like it should be and the section called "hello" but I can not get it to go in the right place, it should be somewhere in the selected poem..

i've searched the attached script, .js and .html file and can't find any section called "hello". pardon me if i'm blunt, but what are you talking about? where is this section called "hello"?

i can understand if english is not your first language, but please try to be logical. i can't really help if you aren't making any sense. sorry.

let's try again:

right now, the poems are being displayed when the titles are clicked. you want MORE information about the poem to be displayed when the "show information" button is clicked, is that correct?

newbe123 · November 19, 2010

I am so sorry it is so hard for me to explain in English

I am grateful that you are being so patient

why not? there shouldn't be any problems using innerHTML.

it is a requirement and if I use it I will fail.

and as I said before, I am not allowed to change the HTML document.

right now, the poems are being displayed when the titles are clicked. you want MORE information about the poem to be displayed when the "show information" button is clicked, is that correct?

Yes and than I also want the poem to be hidden and shown.

This is really hard

seanlim · November 20, 2010

right now, the poems are being displayed when the titles are clicked. you want MORE information about the poem to be displayed when the "show information" button is clicked, is that correct?

Yes and than I also want the poem to be hidden and shown.

okay, so now, i need to know where is "MORE INFORMATION" about the poems located? Currently in your HTML file, i can only find the poems

and second question: are you able to use "innerText" instead of innerHTML?

seanlim · November 20, 2010

try this in your .js file. what else do you need? i think it is easier this way.

window.onload = function() {
    hideDikter();
    setupHideLinks();
    setupLinks();
}

// lägger till clickHandlers på alla länkar i innehallsforteckning
function setupLinks() {
    var links = document.getElementById('innehallsforteckning')
        .getElementsByTagName('a');
    for (var i=0; i < links.length; i++) {
        links[i].onclick= link_handleClick;
    }
}

// lägger in en 'dölj information' länk som döljer parentNode dikten när man klickar.
function setupHideLinks() {
    var dikter = document.getElementById('dikter')
        .getElementsByClassName('dikt');
    info = null;    
    //var a_handleClick = 
    
    for (var i=0; i< dikter.length; i++) {
        var a = document.createElement('a');
        a.onclick = (function(n) {
		var info = null;
		var i = n;
		return function(e){
			if(e.currentTarget.innerHTML=="Show Info")
			{
				e.currentTarget.innerHTML = "Hide Info";
				info = document.createElement("div");
				info.innerHTML = "<BR>MORE INFORMATION<BR>MORE INFORMATION<BR>MORE INFORMATION<BR>MORE INFORMATION";
				e.currentTarget.parentNode.appendChild(info);
			}
			else
			{
				e.currentTarget.innerHTML = "Show Info";
				if(info)
				info.parentNode.removeChild(info);
			}
			return false;
		}
	})(i);

        a.innerHTML = 'Show Info';
        dikter[i].appendChild(a);
    }
//alert(a_handleClick.toString());
}

// tar fram id från länken som klickats, ser till så att alla dikter döljs innan den visar dikten ifråga
function link_handleClick(e) {
    var link = e.currentTarget;
    var id = link.href.substring(link.href.lastIndexOf('#')+1)
    var dikt = document.getElementById(id);
    hideDikter();
    showDikt(dikt);
return false;
}

// döljer enskild dikt
function hideDikt(dikt) {
    dikt.style.display = 'none';
}
function showDikt(dikt) {
    dikt.style.display = 'block';
}

// döljer ALLA dikter
function hideDikter() {
    var dikter = document.getElementById('dikter')
        .getElementsByClassName('dikt');
    for (var i=0; i< dikter.length; i++) {
        hideDikt(dikter[i]);
    }
}

newbe123 · November 20, 2010

Thank you so much you are just so kind helping me..

I have a QuickTime movie so you can see exactly what I mean.

http://www.2shared.com/video/bSQKHZi4/karlfeldt.html

I think this explains exactly what I mean.

and about innerHTML. it's just the innerHTML we may not use and nothing else been mentioned

seanlim · November 20, 2010

Have you tried the last javascript code i posted? I think it does exactly what the video shows, except that you need to replace it with the correct poem information.

and replace all the innerHTML with innerText since you are allowed to use that.

newbe123 · November 20, 2010

I thank you very much for all your help, and I know that you can not use innerHTML, and no other requirements

But for safety's sake I have sent mail to my teacher and asked if one may use the inner text instead, or not.

If I have problems is it ok if I ask you for help again?

when I asked the same question at a Swedish portal, I got no help and just lots of stupid comments instead. I'm really glad that there are people like you who really help others.

Thank you so much

newbe123 · November 20, 2010

Hi again:)

I've changed all the innerHTML to innerText but it does not work!

seanlim · November 20, 2010

window.onload = function() {
    hideDikter();
    setupHideLinks();
    setupLinks();
}

// lägger till clickHandlers på alla länkar i innehallsforteckning
function setupLinks() {
    var links = document.getElementById('innehallsforteckning')
        .getElementsByTagName('a');
    for (var i=0; i < links.length; i++) {
        links[i].onclick= link_handleClick;
    }
}

// lägger in en 'dölj information' länk som döljer parentNode dikten när man klickar.
function setupHideLinks() {
    var dikter = document.getElementById('dikter');
    info = null;    
    
    for (var i=0; i< dikter.children.length; i++) {
        var a = document.createElement('a');
        a.onclick = (function(n) {
		var info = null;
		var i = n;
		return function(e){
			currentTarget = this;
			if(currentTarget.innerText=="Show Info")
			{
				currentTarget.innerText = "Hide Info";
				info = document.createElement("div");
				info.innerText = "MORE INFORMATION HERE";
				currentTarget.parentNode.appendChild(info);
			}
			else
			{
				currentTarget.innerText = "Show Info";
				if(info)
				info.parentNode.removeChild(info);
			}
			return false;
		}
	})(i);
	a.innerText = 'Show Info';
        dikter.children[i].appendChild(a);

    }
}

// tar fram id från länken som klickats, ser till så att alla dikter döljs innan den visar dikten ifråga
function link_handleClick(e) {
if(!e)
	e = window.event;
if(e.currentTarget!=null)
	var link = e.currentTarget;
else
	var link = e.srcElement;
    var id = link.href.substring(link.href.lastIndexOf('#')+1)
    var dikt = document.getElementById(id);
    hideDikter();
    showDikt(dikt);
return false;
}

// döljer enskild dikt
function hideDikt(dikt) {
    dikt.style.display = 'none';
}
function showDikt(dikt) {
    dikt.style.display = 'block';
}

// döljer ALLA dikter
function hideDikter() {
    var dikter = document.getElementById('dikter');

    for (var i=0; i< dikter.children.length; i++) {
	if(dikter.children[i].nodeType==1 && dikter.children[i].className=="dikt")
        hideDikt(dikter.children[i]);
    }
}

okay, it had some compatibility issues with IE, and I assume you are using IE?

the script breaks in FF without innerHTML, but its stupid banning innerHTML anyway so i doubt it matters

newbe123 · November 20, 2010

No I don't use IE, I don't like IE... it's 2 slow I think...

I am using Firefox and I also tried in IE but nothing worked there.

with Firefox it does not work when I change innerHTML to innerText.

And I know that is so stupid that it's not allowed to use innerHTML but unfortunately it is a requirement.

So.... What can the problem be?

seanlim · November 20, 2010

I'll have to ask you the same question: what can the problem be? the problem is at your end, not mine.

I've tested it on IE, Chrome and even Safari. They work okay without any errors. Except for FF which doesn't work cos you are not allowed innerHTML.

You gotta describe what exactly is not working, what errors are you getting, when are you getting them etc.

Are you 100% sure you have updated the JS file with the code I posted and that you are not viewing a cache/wrong copy of the file?

newbe123 · November 20, 2010

OMGGGGGG.. yes yes yes yes You are just the best...

It did not work in FF and I think with IE it maybe was because I have an old version... I don't like IE so I don't update it

I tried it with safari and it wooooorks thank God and thank youu

I am just going to change the information and than done thanks 2 u

I am so happy...thank you for been so patient

I can't thank you enough

Sign In

How to Hide and Show a Text in JavaScript?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information