Как сделать плавно выпадающию панель?

[Kolyaj]

Kolyaj, он написал не лень

И правда

[twolf]

решил потренироваться. но застрял.
Создал два блока и элемент на котором кликаем.
При клике блок меняет свою высоту, но не до 100 px а до бесконечности.
Что тут не так?
Вот такой простенький код.

function run(id){
  var maxheight = 100;
  var elem = document.getElementById(id);
  var h = elem.offsetHeight; 
      slide = function(){ 
          ++h;
          elem.style.height = h + 'px';
      }
  if (h > maxheight) clearInterval (intervalID);
  if (h < maxheight) intervalID = setInterval('slide()',1);     
}

[Octane]

Таймер уничтожается в функции run, которая создав его, больше ни разу не вызывается.

Меняем высоту родительского блока, а высоту вложенного блока только спрашиваем через offsetHeight, а у вас работа идёт с одним элементом.

В принципе 2 блока не обязательно, можно и одним обойтись, только код будет по сложнее, а можно ещё со свойством clip: rect(…); попробовать сделать.

[twolf]

Таймер уничтожается в функции run, которая создав его, больше ни разу не вызывается.

действительно, сам догадался, не успел написать. но Вам все равно спасибо.

а у вас работа идёт с одним элементом.

ну да. пока такую задачу и ставил. :-)

Вот как раз спросить хотел. На сколько принципиально использование двух блоков. и почему высоту надо менять именно у внешнего

[Octane]

На сколько принципиально использование двух блоков.

Просто при использовании 2-х блоков появляется возможность сделать так, чтобы контент был скрыт сразу же после загрузки CSS, хотя есть и недостаток, пользователи с выключенным JavaScript не смогут увидеть такой текст, им придётся выключить ещё и CSS Да и верстальщики обычно делают подобные вещи из двух блоков, семантика тут особо не нарушается. В случае с одним блоком, его содержимое скрывается немного позднее (обычно), в момент когда срабатывает JavaScript, потому что надо запомнить высоту. Если эти блоки довольно большие, то возникает неприятный эффект с дёрганьем страницы. Недостаток в том, что нужно будет где-то хранить высоту этих блоков и обновлять её каждый раз при изменении содержимого. В общем надо выбирать по ситуации, какой из способов наиболее подходящий. Есть ещё способ с использованием абсолютно позиционированных блоков и свойства clip, но я сам не пробовал реализовать такой эффект с его помощью.

почему высоту надо менять именно у внешнего

потому что у него задано свойство overlow: hidden; и для того, чтобы потом знать на какую высоту разворачивать этот блок, спросив высоту вложенного.

[twolf]

Octane, а тестовые задания еще есть?

[Kolyaj]

ользователи с выключенным JavaScript не смогут увидеть такой текст, им придётся выключить ещё и CSS

http://harisov.livejournal.com/63790.html

[Octane]

Octane, а тестовые задания еще есть?

Ну еще с градиентом в тексте есть :-) в прикреплённом файле.

http://harisov.livejournal.com/63790.html

Ну да это может помочь в большинстве случаев, хотя мне не особо нравится идея писать разные версии CSS для пользователей с включенным JavaScript и нет, но когда безвыходная ситуация, пользуюсь этой техникой.