Text Reveal Javascript [Archive]

View Full Version : Text Reveal Javascript

masey

05-11-2003, 05:13 PM

I'm sure it's possible... maybe someone can point me in the right direction???

What I need to do is produce an FAQ page for a site where I want only to list in a table the list of FAQs without the answers visible anywhere on the same page. When the user clicks on one of these questions I want the answer to appear in the cell below the question.

So in essence, the table cells will be set up so that they contain question, then answer, question, then answer and so on... but when the user first loads the page the answers will be invisible and only appear when their respective question is clicked...

Make sense? I have tried for days now to find a script online that will do this for me???? No luck so far... can anyone out there help me?

A1ien51

05-11-2003, 06:44 PM

It would be done with innerHTML

something like this might help you out to get started
http://www10.brinkster.com/a1ien51/JavaRanch/innerhtmltext.htm

Vladdy

05-11-2003, 06:51 PM

Much easier to do without tables (which you should not be using in the first place):

<style>
ol.faq li p
{ display: none;
}
</style>
<script>
function flipVisibility(liElem)
{ if((sd=liElem.lastChild.style.display)=='block')
sd='none';
else
sd='block';
}
</script>
<ol class="faq">
<li onclick="flipVisibility(this);">Question
<p>Answer</p>
</li>

</ol>

If you care about accessibility (which you should) it would be better to have answers rendered visible so that they can be viewed by those with disabled javascript:

<script>
function hideAnswers()
{ questions=document.getElementById('faq').childNodes;
for(i=0;i<questions.length;i++)
questions[i].lastChild.style.display='none';
}

function flipVisibility(liElem)
{ if((sd=liElem.lastChild.style.display)=='block')
sd='none';
else
sd='block';
}
</script>
<body onload="hideAnswers()">
<ol id="faq">
<li onclick="flipVisibility(this);">Question
<p>Answer</p>
</li>

</ol>

As far as inerHTML goes its about the worst way to accomplish the task.

chrismiceli

05-11-2003, 07:25 PM

I though css would make this easy, just put the answers in divs and the questions in divs, then do this

<div onClick="document.getElementById('ans1').style.visibility='visible'">
question</div>
<div id="ans1">answer here</div>

//edit
just put the "invisible" div inside the lower cell if you are intent on using tables.

Vladdy

05-11-2003, 07:49 PM

visibility is a wrong attribute to use. It will leave white space in place of the block element.

FrogieA

05-12-2003, 07:41 PM

A good example on an educational website :

www.irt.org/

I have used it in many pages (only available on a corporate intranet or I would link to it here).

This is the link directly to their working example.
http://developer.irt.org/script/410.htm

It uses DIV and Table tags, leaves no white space and I use it on both Netscape 4.6+ and IE 5.0+

FrogieA

05-13-2003, 07:19 PM

Here is a working example of what it sounds like you need..You could change the mouseover code to be an onclick....

<html>
<head>
<title>Sample</title>
<style type="text/css"></style>
<script type="text/javascript" language="JavaScript"></script>
</head>
<body>
<div id="L1" class="title">
<table bgcolor="#FFCC99" >
<tr>
<td>
<p>
<P onMouseover="show('L01')" onMouseout="hide('L01')">
<b>1.</b>Question: What did the taco bell dog say to Godzilla</p>
</td>
</tr>
</table>
</div>
<div id="L01" class="article">
<table bgcolor="#FFFFCC">
<tr>
<td>
<b>First Answer:</b>
<br> Here it is.
<b>Size Matters</b>
<br>
</td>
</tr>
</table>
</div>
<div id="L2" class="title">
<table bgcolor="#FFCC99" >
<tr>
<td>
<p>
<P onMouseover="show('L02')" onMouseout="hide('L02')">
<b>2.</b>What did Godzilla Answer</p>
</td>
</tr>
</table>
</div>
<div id="L02" class="article">
<table bgcolor="#FFFFCC" >
<tr>
<td>
<b>Answer 2 :</b>
<br>ROARRRRRRR
<br>
</td>
</tr>
</table>
</div>
</body>
</html>

:D