HTML+CSS+JavaScript

Добрый день.
Имею такую структуру (смотрите картинку) - несколько блоков div. Item, в каждом из них есть:
div.btn - блок-кнопка;
div.more - блок с дополнительной информацией.
div.more раскрывается по клику на div.btn при помощи функции slideToggle() Jquery.

Сейчас открывается текущий div.more, но он не закрывается при открытии другого и при клике в пустое место страницы.

$("div.btn").click(function()     {       $(this).next(".more").slideToggle('normal');     });

Подскажите, пожалуйста, как сделать чтобы если я кликаю по кнопке div.btn, то открывался соответствующий div.more (только один), а другой открытый прежде - сворачивался?
При клике вне за пределами div.item - сворачивался бы открытый div.more?

Вообщем, аналог Аккордеона, но проблема в том, что каждый Item самодостаточен и у него нет потомков.

Ну например сначала сворачивать все, а потом разворачивать нужный.

А это интересная мысль! Спасибо, попробую.

-