Аккордеон на CSS без использования JavaScript
Простой аккордеон без использования JavaScript
В статье "парочка аккордеонов" я рассказывал, как сделать простой аккордеон с использованием JavaScript. Однако, будучи "certified CSS 2.0 designer" и "certified XHTML 1.0 designer", я не смог удержаться, чтобы не сделать аккордеон без JavaScript (только на CSS/XHTML). IE6 потребуется несколько иная разметка, чем нормальным браузерам (об этом можно прочитать в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript"), [...]
← Вернуться к полной версии записи «Аккордеон на CSS без использования JavaScript»…
Автор: Vladimir; опубликовано в: CSS, HTML; метки: CSS, XHTML, аккордеон14
Апр
2008
Апр
2008
Комментарии к статье «Аккордеон на CSS без использования JavaScript» (12) »
Пожалуйста, не используйте эту форму для комментирования! Данная форма предназначена исключительно для ботов.
Оставить комментарий к записи «Аккордеон на CSS без использования JavaScript»
गते गते पारगते पारसंगते बोधि स्वाहा
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
Рабочий пример не работает в IE6
Иван, большое спасибо — при merge потерялся
#accordionв последнем правиле. Сейчас должно всё работать (пока проверить не могу, ибо шестого ишака под рукой нет).Всеравно неработает в ie6
Работает… Вы на кэш Сквида смотрели
Скриншот со страницы прикреплён к комментарию.
accordion3_ie6.png
Владимир! А опишите пожалуйста аккордион,используемый на этой странице,т.е открытие блока кликом на значок +,закрытие -.Или это не аккордион?Но мне нравится!Хочу такой же!
Это не аккордеон.
Если вкратце:
<div class="codebox_right">
<span onclick="CodeBox.toggleCollapse('p1001');" id="p1001_symbol">[-]</span>
</div>
</div>
<div class="codebox">
<div id="p1001" class="the_code">
Lorem Ipsum Dolor Sit Amet
</div>
</div>
JavaScript:
toggleCollapse : function(objname)
{
var obj = document.getElementById(objname);
if (!obj) {
return;
}
var old_display = obj.style.display;
obj.style.display = ('none' == old_display) ? '' : 'none';
if ((symbol = document.getElementById(objname + '_symbol'))) {
symbol.innerHTML = symbol.innerHTML == '[+]' ? '[-]' : '[+]';
}
}
}
Лучше поздно, чем никогда! Забыла сказать вам спасибо! Ваш код мне тогда очень помог! Благодарю за помощь!
А у меня все получилось синим цветом после установки. Пришлось поменять в первой строчке #00F на свой. Акцентируйте на этом внимание, не все же знают css.
footballer, а как использовать решение на CSS без знания самого CSS? Предполагается, что кое-какие знания по теме у читателя всё же есть.
“Удивится” не работает в Chrome и Chromium
Без обид.
Вполне может быть — когда я это писал не было ни Хрома, ни Хромиума.
Все работает)