The Visibility Toggle

Back
Show | Hide all details
 

Author: Sim D'Hertefelt

Home page: http://www.interactionarchitect.com / .be

Compatibility: works with IE6 and NN7 (other browsers not tested)

Description

The Visibility Toggle allows users of your site to show and hide text and/or images (the "toggle") by clicking on some other text and/or image (the "hotspot"). The user can do this one at a time or all in one click. The toggle can appear inline with the hotspot and does not take up space when hidden.

With the Visibility Toggle you can keep your pages concise while at the same time providing users with easy access to more detailed information on demand. This is an ideal solution for providing context sensitive help in forms and for layering complex information to different user needs.

Demo

Here are some of the multiple uses of the Visibility Toggle. View the source code of this page to see how you can do the same.

Show | Hide all details, or the same function with images:

Lorem ipsum ( Olor sit amet, consectetuer adipiscing elit ). Suspendisse eget sapien. Etiam eget lorem. Donec rhoncus pede nam faucibus, erat in porttitor porta, metus erat tincidunt nulla, ac feugiat justo lectus eu velit, nec justo. Ut varius hendrerit diam. Ut ut augue.

In mollis nunc nec orci. Praesent dui. Pellentesque tortor leo, volutpat id, ullamcorper in, malesuada vitae, tellus. Morbi nec enim. Phasellus quis velit.

  • Lorem ipsum dolor sit amet: consectetuer adipiscing elit
  • Sed vel arcu sed odio bibendum blandit
  • Nunc iaculis velit ac magna
    • Vestibulum congue magna non massa
    • Vestibulum congue ante eget lectus

Lorem ipsum :
Olor sit amet, consectetuer adipiscing elit
Sed vel [ Huh? Arcu sed odio bibendum blandit ]:

Advantages

The Visibility Toggle has several advantages over other popup and context sensitive help mechanisms.

  • The user can display more than one toggle at the same time, which is not possible with mouse over popups nor with most other popup solutions. The user can even show all toggles with one click and view or print the page with all details.
  • You can use rich HTML within the toggle, which is not the case when you use "title" or "alt" property popups, i.e. the yellow popups that are displayed by the browser and that can only contain text.
  • There are no popup windows that sometimes block the user's view on the main content and which are sometimes blocked by his browser.
  • The toggle does not take up space when hidden, as is the case with most layers or block elements whose visibility status can be manipulated.
  • You have full control over the look and feel of hotspots and toggles. But we provide a user-friendly standard to get you started.

Directions

Step 1: Copy and paste the code below into the <HEAD> section of your page.

The code includes a css section and a Javascript section.

Select

Step 2: Modify the <body> tag

Add the code onLoad="visibilitytoggle()" to the body tag of your document:

<body onLoad="visibilitytoggle()">

Step 3: Add hotspots and toggles

To define a hotspot, i.e. the clickable text and/or images that show and hide the toggle text and/or images, you can surround it with the following <span> tag:

<span id="hotspot" name="hotspot" class="hotspot">Your hotspot text or image</span>

Alternatively, you can add the code id="hotspot" name="hotspot" class="hotspot" to most tags directly, e.g.

<p id="hotspot" name="hotspot" class="hotspot">Your hotspot paragraph</p>

To define an image hotspot you can either use the <span> tag to surround the <img> tag or add the code directly to the <img> tag as follows:

<img src="Your_image.gif" id="hotspot" name="hotspot">

Notice the absence of the style atribute class="hotspot" in this case, because we do not want the image to take the same formatting as the hotspot text, i.e. dotted underlined.

To define a toggle, i.e. the text and/or images that can be shown and hidden by clicking on the hotspot, you can surround it with the following <span> tag:

<span id="toggle" name="toggle" class="toggle">Your toggle text or image</span>

Or, you can add the code id="toggle" name="toggle" class="toggle" to most tags directly. The following example shows/hides an entire list:

<ul id="toggle" name="toggle">

Notice that you can either use the style atributes class="hotspot" and class="toggle" and the css styles you copied into the <head> section to easily format hotspots and toggles in a consistent way. Or, you can drop the style atributes class="" for the hotspots and toggles that you want to format in a different way from the others.

That's it! You don't need to worry about uniquely identifying or linking each hotspot to a toggle. The Visibility Toggle is smart enough to know that the fifth hotspot in your page has to show and hide the fifth toggle.

Step 4 (optional): Add the hotspots to show | hide all details

<span onClick="showall()" class="hotspotall">Show all details</span>

<span onClick="hideall()" class="hotspotall">Hide all details</span>

Or with images:

<img src="Your_image.gif" onClick="showall()">

<img src="Your_image.gif" onClick="hideall()">

Step 5 (optional): Customize the look and feel of hotspots and toggles

You can fully control and customize the look and feel of hotspots and toggles with the css styles you copied into the <head> section of your page.

  • .toggle {} defines the appearance of the toggles
  • .hotspot {} defines the appearance of the hotspots
  • .hotspotall {} defines the appearance of the hotspots to show and hide all toggles

 

Read more about Sim's current activities: Copywriting by Kwintessens | Information architecture by Kwintessens (in Dutch)