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

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

А причем здесь раздел AJAX?

Берем 2 HTML-контейнера блочного типа, один вложен в другой. Добавляем элемент, способный получать фокус ввода, например, гиперссылка, для переключения состояния открыт/закрыт. Добавляем обработчик события нажатия ссылки, по которому определяем через offsetHeight высоту вложеного блока и по таймеру соответственно постепенно меняем высоту внешнего блока. Для внешнего блока нужно не забыть установить CSS-свойство overflow: hidden; и чтобы избежать трудностей, по возможности, не использовать вертикальный margin и padding.

Ну а если лень самому писать, возьми, например, jQuery и используй метод slideToggle.

т.е. это ваще без JavaScript делается? Мне ваще-то не лень самому писать, но просто я не совсем догоняю как это делается... Octane,
не мог бы ты привести пример?

Тогда это вообще в раздел "Работа".

ну помогите плиз, кто-нибудь скиньте пример кода, я просто в этом плохо разбираюсь

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

В прикреплённом файле тестовое задание (именно то, что вам нужно), которое выполнял программист, при поступлении на роботу в студию, где я работаю. Код конечно не на высоте, но как пример подойдет.

Octane, пасибо, выручил!

блин, там тока с кнопками, а с простыми ссылками так не проделывается...

Да. Переделать для ссылок конечно нереальная задача…

Ну это только ваша проблема :)
Разобраться и попробовать переделать самому, что не будет получаться или найти и исправить ошибку здесь всегда помогут, а за готовыми решениями вам Kolyaj уже написал куда обращаться…

И правда :)

решил потренироваться. но застрял.
Создал два блока и элемент на котором кликаем.
При клике блок меняет свою высоту, но не до 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);     
}

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

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

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

действительно, сам догадался, не успел написать. но Вам все равно спасибо.
ну да. пока такую задачу и ставил. :-)

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

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

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

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


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