more once more

23rd November 2007

Next Demonstration

Previous Demonstration


Probably the last one in the 'more' series showing how adaptable this javascript routine can be. Not only for showing and hiding extra text, but also for showing and hiding forms, tables, lists, links etc.

Because the hidden information is held in a <div>, you can have anything you like contained therein, even other <div>s.

This one uses text held in a <b> tag with a class of 'switch' and the hidden information in a <div> tag with a class of 'hide'. The <div> must follow after the <b> although you can place them on different lines in your html.

Clicking the <b> tag text will change the text from 'Show' to 'Hide' and from black to red and show the hidden information. Clicking the text again will change it back to its original state and hide the information. Instead of clicking the same text you can click another text line and this will hide the previous information, change the text associated with the previous information back to its original state, show the new information and change this text to suit.

All this is achieved with just a few lines of javascript which ONLY monitors the mouse clicks and alters the class names. The CSS is used to style the information so you have a free hand to present the information to suit your website.

Tested in IE6, IE7, Firefox, Opera, Mozilla, Netscape and Safari (PC).


All the files, except the images, can be downloaded using the link below. If you are going to use this in your website then please respect my copyright and keep the credits in the stylesheets and javascript.