How to hide and show text

@byleSep 28.2006

Hello!

I’m quite new with javascript and I have a problem.

I’m trying to create an HTML with javascript to show some lines of text. Once you click on one of this lines it appears another line below the one you’ve clicked. I would like to create this funtionality so you click and it appears and you click again and it hides. The hidden text should be html text and not labels or something similar… And everything should appear hidden at the beggining (exept the links to show the hidden text…)
I don’t know if I have explained well….
Can anybody help me with this?? I know it is simple, but I don’t know how to do it.

THANKYOU!!!!

to post a comment

JavaScript

@DokSep 28.2006 — #Here is a small example

[code=html]<html>
 <head>
 
 <script type="text/javascript">
 
 function showHide() {
 var tmp = document.getElementById('hide').style;
 if(tmp.display == "none")
 tmp.display = "inline";
 else
 tmp.display = "none";
 }
 
 </script>
 </head>
 
 <body>
 
 <div onclick="showHide();">Click me to view hidden text</div>
 <div id="hide" style="display: none;">This is the hidden text</div>
 
 </body>
 </html>[/code]

@KorSep 28.2006 — #Like this?:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;style type="text/css"&gt;
 .hidden{
 display:none;
 }
 .shown{
 display:block;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 function showhide(sib){
 while(sib.nodeName.toLowerCase()!='div'){
 sib=sib.nextSibling;
 }
 sib.className=sib.className=='hidden'?'shown':'hidden';
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;
 &lt;span style="cursor:pointer" onclick="showhide(this.nextSibling)"&gt;Lorem ipsum dolor sit amet&lt;/span&gt;&lt;div class="hidden"&gt;consectetuer adipiscing elit. Aenean ut felis non turpis porttitor condimentum.&lt;/div&gt;
 &lt;/div&gt;
 &lt;div&gt;&lt;span style="cursor:pointer" onclick="showhide(this.nextSibling)"&gt;Maecenas orci massa, lacinia quis&lt;/span&gt;&lt;div class="hidden"&gt;imperdiet non, feugiat nec, nisl. Praesent quis nisi. Mauris eu purus. &lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@byleauthorSep 28.2006 — #YES!!

That was what I wanted!

THANKS kor & dok !!!

How to hide and show text

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to hide and show text

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴