Beyond Fusion
Follow us on Twitter
 
bug-grn
tutorial

Using a Simple JavaScript and CSS to Show/Hide Content

Tested and Works with:

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

Internet Explorer FireFox Safari
Chrome Opera

You are using:

Working Example

This is item 1

the hidden text for item 1 goes here between the P tags

This is item 2

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).
 

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.
 

 

©2004-2017

Buy AllWebMenus

Works with Fusion 2015

NetObjects Fusion is Registered Trademark of NetObjects, Inc.

Adobe 

Once You Know, You Newegg 

mariadb-badge-88x31