Увеличить размер div'a, нужна помощь.

[neonick]

Здравствуйте! Только недавно начал осваивать javascript, столкнулся с решением, которое не могу осилить, прошу вашей помощи.

Собственно что нужно:

Есть блоки, в них есть немного текста. По наведию блок меняет цвет(CSS, все просто), а по клику на этот блок он разворачивается + отображает остальной текст и меняет бэкграундную картинку.

По клику на развернутый блок, он принимает первоначальный вид.

Посмотрите приложение, думаю все понялно будет.

Вроде все просто, мучал всякие аккордеоны под jquerry, не нашел подходящего мне варианта.

Буду благодарен за любую помощь.

[neonick]

Кажется нашел решение:

JavaScript:
function show(ele) {
      var srcElement = document.getElementById(ele);
      if(srcElement) {
          if(srcElement.style.display == "block") {
            srcElement.style.display= 'none';
          }
          else {
            srcElement.style.display='block';
          }
      }
  }

HTML-код:
<div class="headline" onclick="show('cat1')">Заголовок</div>
<div class="hidden" id="cat1">Текст раскрывающегося блока</div>

Скрытый блок вывожу ровно над заголовочным, из-за этого кажется что блок расширяется. Как бы сделать чтобы плавнее разворачивался?..

[ksa]

Как бы сделать чтобы плавнее разворачивался?..

Используй setTimeout()...