Using a Simple JavaScript and CSS to Show/Hide Content

This tutorial teaches you how to use a simple JavaScript and CSS to show/hide content on a page. Useful for simple FAQ pages, for example.

Tutorial and code by: Chuck Joslin

Tested and Works with:

You are using:

Step 1. In your page Layout HTML, insert this script on the Between Head Tags tab.
            (change the included style to suit your needs for text decoration - like "underline" rather than "none")
 

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
with (document)
{
write("<STYLE TYPE='text/css'>");
write(".hiddentext {display:none} .outline {cursor:pointer; text-decoration:none}");
write("</STYLE>");
}

function expandDIV(whichElement)
{
whichElement.style.display = (whichElement.style.display == "block" ) ? "none" : "block";
}
</SCRIPT>
 

           note: you can pull the bold part out of the script and simply add the style info above the script inside the head
           if you wish like this (or use a page level style in Fusion if you prefer):

          <STYLE TYPE='text/css'>
              .hiddentext {display:none}
              .outline {cursor:pointer; text-decoration:underline}
          </STYLE>



Step 2. Create your content.

This works by placing an onclick handler connected to text that acts as the item heading.

  a. Place a text box on the page where you want your "headlines" and hidden text to appear.

  b. Press Ctrl+T and enter something similar to the following code into the Insert HTML window:

      <H4 onClick="expandDIV(item1); return false" CLASS="outline">This is item 1</H4>
      <DIV ID="item1" CLASS="hiddentext">
          <P>the hidden text for item 1 goes here</P>
      </DIV>

      <P onClick="expandDIV(item2); return false" CLASS="outline" title="Click for Item 2"><b>This is item 2</b></p>
     <DIV ID="item2" CLASS="hiddentext">
          Item 2 text. Repeat for additional items, changing the item number for each to a unique number. Note removal
          of paragraph tags inside this DIV to eliminate black line below heading (also changed to replace H4 with P).
     </DIV>

 Notes: the format is the visible heading followed by a DIV construct containing whatever you want to display when the heading is clicked on. This can contain plain text, a table, images...whatever you code.

Add the red code as in the item2 example to add a tool tip when you mouse over the heading. This feature only works partially in Opera, for some reason.