Ars Longa, Vita Brevis

Apr 14, 2008

Аккордеон на CSS без использования JavaScript

Рубрика: CSS, HTML
Tags: , , , аккордеон
Vladimir @ 21:17
RSS 2.0

Простой аккоржеон без использования JavaScript

В статье "парочка аккордеонов" я рассказывал, как сделать простой аккордеон с использованием JavaScript. Однако, будучи "certified CSS 2.0 designer" и "certified XHTML 1.0 designer", я не смог удержаться, чтобы не сделать аккордеон без JavaScript (только на CSS/XHTML).

IE6 потребуется несколько иная разметка, чем нормальным браузерам (об этом можно прочитать в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript"), поэтому я сразу привожу разметку, которая подойдёт для всех браузеров (за основу взята разметка из статьи "парочка аккордеонов"):

[-]
View Code HTML
    <ul id="accordion">
        <li>
            <a href="#">Item 1<!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
            <ul>
                <li><a href="#">SubItem 1.1</a></li>
                <li><a href="#">SubItem 1.2</a></li>
                <li><a href="#">SubItem 1.3</a></li>
                <li><a href="#">SubItem 1.4</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
        </li>
       
        <li class="active">
            <a href="#">Item 2<!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
            <ul>
                <li><a href=<span class="st