ShowHide.js javascript component

Purpose in Databrowsers

Scientific user interfaces are often crowded with Too Much Information. This is true for both desktop applications and web-based databrowsers.

Data providers and tool builders often want to display all of their information and functionality up front where users will see it. They are also rightly concerned about users getting lost down labyrinthine paths if they have to follow a trail of links to access information or functionality that is not available up front.

Unfortunately, users can also be overwhelmed by TMI if an interface is too crowded.

A well designed interface will appear easy to use at first glance and will allow users to gracefully access additional information or functionality without losing track of their current location. This is where ShowHide can be very useful. Like a flip-down panel on an old stereo or a modern thermostat, ShowHide allows designers to present end users with a simplified version of the interface, hiding additional resources beneath well labeled headings. End users can easily access these resources by opening and closing various sections without ever moving from the current page.

This page itself uses ShowHide. If you click on any of the headers you will toggle the display of the following XHTML element.

Documentation

We have recently adopted the jQuery library for all of our user interface behavior. Over the years jQuery has gained more and more adherents and seems, to us, to be the clear favorite as of 2010. We had previously enjoyed the Prototype javascript library and present two versions of the ShowHide code: one for jQuery and one for Prototype.

jQuery version

Your web page must include jQuery and ShowHide with the following code in the <head> section:

<link type="text/css" rel="stylesheet" href="style/ShowHide.css" />
<script type="text/javascript" src="behavior/jquery.min.js"></script>
<script type="text/javascript" src="behavior/ShowHide.js" />

Prototype version

Your web page must include Prototype and ShowHide with the following code in the <head> section:

<link type="text/css" rel="stylesheet" href="style/ShowHide.css" />
<script type="text/javascript" src="behavior/prototype.js" />
<script type="text/javascript" src="behavior/ShowHide.js" />

Both versions

As is evident, we prefer to keep all of the javascript code in a 'behavior/' directory; all of the css in a 'style/' directory; and all of the stylistic images in a 'style/images/' directory. The code inside of ShowHide.js assumes this directory layout and will need to be modified if you wish to use another directory layout.

Structure your document with headings followed by <div> tags. as in:

<h2 class="trigger">Heading Name</h2>
<div>
  content
</div>

XHTML elements following an element with class="trigger" (the <div>'s in this case) will begin life hidden. If you need some blocks to begin life expanded you may give the relevant header elements class="expanded" instead.

An additional advantage of structuring your pages in this manner is that they will be more easily parsed by semantic extractors.

Source

Attribution

The ShowHide component is a simple port of some of the functionality found in Christian Heilmann's 2005 domCollapse.

XHTML & CSS