Magic Box Template

Box 1

This page contains a number of sections/boxes which can be opened or closed by clicking on the links on the right. Each section/box also has a button like the one below which can be used to close that particular box.

The first box opens on load. The header, footnote and navigation bar are always displayed.

Notes on the XHTML, CSS and JavaScript source code and for this template can be found in the second box.

The other two boxes have only sample text.

 
close this box

Box 2

The basic CSS layout is adapted from the 2 columns - right menu layout found in the blue robot layout resevoir. You ought to go there, and also to http://glish.com/css/ for more info on how to use the infamous CSS Box Model Hack.

The JavaScript used to open and close the boxes on the page is based on a script created by Peter Paul Koch. Head over to his site and look up JavaScript Section>DHTML - Practice>Navigation: display.

The boxes which open and close are <div>'s belonging to the same class. The JavaScript manipulates the <div>'s display state, changing it from "none" to "block". Because each of the boxes which opens and closes also has a unique id value, the script can act upon each of them separately. The id value is in the form of "numberX", where X=a unique number(0,1,2,3...).

When the display value is set to none the <div> is hidden and takes up no space in the page. When set to "block" the box appears in its normal order.

 
close this box

Box 3

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

 
close this box

Box 4

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

More text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

 
close this box

here be the footnote || dylanfoley@sympatico.ca
layout template by dylan || http://www3.sympatico.ca/dylanfoley/index.html