show / hide list

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

Next Demonstration

Previous Demonstration


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.


All the information you need for this demo is in the page source code. You will also need a copy of jQuery.