Script that makes text with more information fold out - where to find


I tried searching on google but as english is my second language im not sure what words to search on. I am searching for a script or something that can make text with more explanation fold out, not pop up.

I’ve seen it in some FAQ scripts. When you click on the FAQ text with the content of the FAQ folds out beneath the FAQ. When you click on the FAQ again it folds up again.

Does anybody here know a script or some way to do that? I am writing a text that is in verses - not a FAQ - and need to be able to view more comments on the text in each verse when clicking on it.


This search should bring up the tutorials you need:

Thanks alot! I found the following script that works fine - however I’m trying to add color to the background of the text which is shown when clicking on the ‘show’ link. I added style twice and suppose this isn’t okay. It works, however, only in explorer, the background color isn’t shown in firefox.

Is there a way to add background color to the text so it works in firefox as well? The script i found following your link is:

<script language=“javascript”>
var state = ‘none’;
function showhide(layer_ref) {
if (state == ‘block’) {
state = ‘none’;
else {
state = ‘block’;
if (document.all) {
eval( “document.all.” + layer_ref + “.style.display = state”);
if (document.layers) {
document.layers[layer_ref].display = state;
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref); = state;

Note that i added style twice in the following:

div style=“line-height: normal; text-align: left”><span style=“font-size: small”><span style=“font-family: Verdana”>Some text shown from start here… <br /><font size=“1”>[<a href=“#” onclick=“showhide(‘div1’);”>Show/hide</a>]</font>

<div id=“div1” style=“display:none;” style="background-color: #F8F3D2;">Text shown here when clicking the ‘show’ link</div></span></span></div>

The problem is if i replaces style="display:none with style="background-color the text that should initially be hidden is shown from start.

As you can see I’m absolutely not a programmer. Hoping for some input.


I added both in style=“display:none; background-color: #F8F3D2;” and now it works fine in both browsers.


norgaards - you cannot duplicate attributes for an element - so yes, you would want both to be inside the single style=“”.

Might I suggest you take a look at something like jQuery. It could make getting into this sort of thing a lot easier (or if you never want to understand it - which I think you should), it just makes it easier to do anyways.