stunicholls.com

...exploring the possibilities

jQuery show/hide list information

13th December 2009

Show a Form
Show a picture with text
Show a table
Show some links
Show an unordered list
Show a text area

Table showing arrivals
at Bristol Airport

Arrivals to Bristol - England
Flight code	From	STA	ETA	Notes
Date : 19th October 2005
T3 4264	Isle of Man	11:40	11:42	landed at 11:43
BA 4081	Paris-CDG	11:45	11:57	landed at 11:58

Next Demonstration Next Demonstration

Information

This version of show / hide information uses jQuery and an unordered list. The list items all have the same classname and can be used anywhere on your page. The first word in each list item has a classname that is the same as the id of the div to be shown or hidden. The div can contain any information and can be styled as you want.

Tested in IE6, IE7, IE8, Firefox, Opera, Safari (PC) and Google Chrome.