Разбираюсь с модными HTML5 и CSS3, а точнее, с бесскриптовой анимацией, с помощью transition. Попробовал сделать вертикальный (обычный) аккордеон - почти получилось. Ни один яваскрипт не пострадал. Работает под линуксом в Firefox 10, Opera 11.60 и Chromium 14. Под виндой в IE 8 - не работает. В остальных браузерах и ОС пока не тестировал. Modernizr пока тоже не прикручивал.
Действующий пример лежит на
http://shoorick.ru/lj/net/accordion-vertical.html, код - на
гитхабе и
прямо тут:
CSS3 Transition - Accordion sample
CSS3 Transition - Accordion sample
id="ave">
href="#ave">Ave verum
Ave verum corpus, natum de Maria Virgine, vere passum, immolatum in cruce pro homine,
cuius latus perforatum unda fluxit et sanguine: esto nobis praegustatum in mortis examine.
id="gaudeamus">
href="#gaudeamus">Gaudeamus
Gaudeamus igitur, Juvenes dum sumus!
Post jucundam juventutem, Post molestam senectutem, Nos habebit humus!
id="odi">
href="#odi">Odi et amo
Quare id faciam, fortasse requiris. Nescio, sed fieri sentio et excrucior.
Следующая задача - повернуть получившийся баян на 90° - с ней я почти придумал, как справиться. Дальшейшие - смена картинок и прокрутка содержимого блока без участия яваскрипта и посетителя сайта - пока туманны. Но всё равно придумаю. Или нагуглю. Хотя в девизе моей альма-матери другой порядок действий: Нагуглю или придумаю. Aut viam inveniam, aut faciam.