Спрятать и показать список при клике?

Question

[Hello World]

Добрый день всем. Проблема следующая: есть 4 блока, у каждого блока есть свой список. Нужно вывести список блока, по которому кликнули. Когда список открыт, и если мы кликнули за его пределы - список закрывается, выделения активного блока спадает.
Что хочется сделать:
1. Если мы еще раз нажмем на n блок, у которого открыт список, то список скрывался( также сделать как и при клике за пределы списка).
2. Сейчас открываются списки каждого блока, т.е. если нажать на 1 блок - откроется список, нажали на 2й блок - открылся список 2-го блока, но первого не закроется и т.д. Хочется, чтобы при клике на другой блок список скрывался предыдущего и выделения активного переходил на текущий блок, на который последний кликнули.
Вот небольший пример с исходником.
jsfiddle.net/yf404ndz/3

Answer 1

[Виталий Инчин ☢]

jsfiddle.net/yf404ndz/8

Comments

[Hello World]

большое спасибо, последний штрих. Как сделать анимацию хотя бы fadeOut(), hide('normal')?

[Виталий Инчин ☢]

Hello World: либо убрать из css манипуляции с display и использовать fade(In/Out), либо поиграть с transition, opacity, visibility в CSS.