jQuery Simple Collapsible Div?

Я ищу правильный, простой, небольшой код для выполнения следующих действий:

• Щелкните элемент с примененным к нему классом.

• DIV.CLASS - Расширяет и показывает скрытый контент. (slideDown - Toggle)

• DIV.CLASS - Сворачивает и скрывает ранее показанный контент. (slideUp - Toggle)

Я создал jsFiddle здесь: http://jsfiddle.net/Q4PUw/1/

Чтобы быть расплывчатым и простым, мне нужно знать, как получить DIV CLASS стать скрытым и видимым, когда к элементу на той же странице будет применен КЛАСС, в котором будет активироваться и деактивироваться СКРЫТЫЙ и / / ВИДИМЫЙ HTML-контент. И мне нужно, чтобы он был скрыт по умолчанию.

Я просмотрел весь Интернет и нашел только очень сложные сценарии, но ничего простого. Я нашел простые аккордеанцы ... Но они никогда не закрываются, они просто открывают еще один.

Спасибо всем за помощь, и я надеюсь, что смогу ответить на этот же вопрос для множества других людей ...

Примечание: я очень мало знаю JavaScript и или даже jQuery.