HTML+CSS+JavaScript

Всем привет!
Есть таблица

<table border="1"> <tr><td colspan="5" style="width:400px; font-weight: bold">Категория 1</td></tr> <tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td>1.5</td></tr> <tr><td colspan="5" style="font-weight: bold">Категория 2</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr> <tr><td colspan="5" style="font-weight: bold">Категория 3</td></tr> <tr><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td><td>3.5</td></tr> <tr><td colspan="5" style="font-weight: bold">Категория 4</td></tr> <tr><td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td><td>4.5</td></tr> </table>

Подскажите как сделать по умолчанию что бы то, что под категорией 1, 2, 3 или 4 было скрыто. А также при нажатие на одну из категорий, открывалась та, по которой кликнули.
Заранее спасибо за помощь

http://jsbin.com/imogej/3/edit

Спасибо

А что если таблица будет иметь подобную структуру но будет больше полей в каких то категориях?
Например так

<table border="1"> <tr><td colspan="5" style="width:400px; font-weight: bold">Категория 1</td></tr> <tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td>1.5</td></tr> <tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td>1.5</td></tr> <tr><td colspan="5" style="font-weight: bold">Категория 2</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr> <tr><td colspan="5" style="font-weight: bold">Категория 3</td></tr> <tr><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td><td>3.5</td></tr> <tr><td colspan="5" style="font-weight: bold">Категория 4</td></tr> <tr><td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td><td>4.5</td></tr> </table>

Заранее спасибо

Выбрасывайте таблицу и делайте на списках, проще все будет.

http://jsbin.com/asobox/1/edit

Спасибо за помощь

Кошмар да и только. )
Надо богатую фантазию иметь, чтобы представить меню как табличные данные. Меню это дерево, и строить его надо на списках, тогда, если даже щелчком раскрывать, то это не загружать jQuery, а всего пару строк JS. К тому же, если у пользователя выключен JS, то он может раскрыть такое меню за счет псевдоселектора hover, а ваша таблица будет мертвой.

увы, за счёт :hover не сможет - задача стоит "по нажатию", а не "по наведению"

с праздником!

Почему не сможет? Если рассчитывать на седьмого Ослика, то да, не сможет, но даже для него можно описать поведение в секции noscript. В этой же секции описать поведение меню при наведении, а при подключенном JS будет доступно не только щелчком, но также ударом, пинком и прочими методами. :)
Суть то не в том как, а в том "что". И вот "что" как раз ни к черту не годится, собственно как и предложенное решение, тоже из разряда необдуманных.

Вас тоже.