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

Простой аккордеон без использования 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</a>

<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>

</li>

<li class="active">
<a href="#">Item 2</a>

<ul>
<li><a href="#">SubItem 2.1</a></li>
<li><a href="#">SubItem 2.2</a></li>
<li><a href="#">SubItem 2.3</a></li>
<li><a href="#">SubItem 2.4</a></li>
</ul>

</li>

<li>
<a href="#">Item 3</a>

<ul>
<li><a href="#">SubItem 3.1</a></li>
<li><a href="#">SubItem 3.2</a></li>
</ul>

</li>

<li>
<a href="#">Item 4</a>

<ul>
<li><a href="#">SubItem 4.1</a></li>
<li><a href="#">SubItem 4.2</a></li>
</ul>

</li>
</ul>

Теперь CSS для нормальных браузеров:

[-]

View Code CSS

a { text-decoration: none; color: #00F; }
a:hover { text-decoration: underline; }
#accordion a { outline: 0; }

#accordion, #accordion ul, #accordion li {
list-style: none;
margin: 0;
padding: 0;
display: block;
}

#accordion {
border: 1px solid #CCC;
width: 150px;
}

#accordion ul {
margin-left: 40px;
}

#accordion > li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

/* Update 11-May-2008: в IE7 эта конструкция не работает
#accordion > li:not([class="active"]) ul {
display: none;
}
/**/
/* Для максимальной совместимости с IE7 используем следующие
два правила (их теоретически можно было сделать видимыми только
для IE7, но смысла загромождать код нет :-) ). Легко заметить, что
эти два правила есть инверсия предыдущего закомментированного правила */
#accordion > li[class="active"] ul {
display: block;
}

#accordion > li ul {
display: none;
}

#accordion > li:hover ul {
display: block;
}

#accordion > li:last-child {
border-bottom: 0;
}

#accordion li.active > a {
color: red;
}

Не забудем про IE6:

[-]

View Code CSS

* html #accordion li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

* html #accordion li li {
border-bottom: 0;
padding: 0;
}

* html #accordion {
border-bottom: 0;
}

/* IE7 не понимает last-child */
*:first-child+html #accordion {
border-bottom: 0;
}

* html #accordion li.active a {
color: red;
}

* html #accordion li.active ul a {
color: blue;
}

* html #accordion li table {
display: none;
}

* html #accordion li.active table {
display: block;
}

* html #accordion li a:hover {
position: static;
}

/* Спасибо Ивану Маркееву (http://markeev.labwr.ru) за замеченную опечатку */
* html #accordion li a:hover table {
display: block;
}

Рабочий пример.

Автор: Vladimir; опубликовано в: CSS, HTML; метки: CSS, XHTML, аккордеон

14
Апр
2008

Комментарии к статье «Аккордеон на CSS без использования JavaScript» (11) »

Иван Маркеев

Май 10, 2008 в 17:57

Рабочий пример не работает в IE6

Ответить
Vladimir

Май 11, 2008 в 18:29

Иван, большое спасибо — при merge потерялся #accordion в последнем правиле. Сейчас должно всё работать (пока проверить не могу, ибо шестого ишака под рукой нет).

Ответить
Вовочка

Июль 12, 2008 в 21:17

Всеравно неработает в ie6

Ответить
Vladimir

Июль 12, 2008 в 22:55

Работает… Вы на кэш Сквида смотрели

Скриншот со страницы прикреплён к комментарию.

accordion3_ie6.png

Ответить
Яна

Октябрь 8, 2009 в 12:52

Владимир! А опишите пожалуйста аккордион,используемый на этой странице,т.е открытие блока кликом на значок +,закрытие -.Или это не аккордион?Но мне нравится!Хочу такой же!

Ответить
- Vladimir
  
  Октябрь 11, 2009 в 04:39
  
  Это не аккордеон.
  
  Если вкратце:
  
  [-]
  
  View Code HTML
  
  <div class="codebox_msgheader clearfix">
  <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:
  
  [-]
  
  View Code Javascript
  
  var CodeBox = {
  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 == '[+]' ? '[-]' : '[+]';
  }
  }
  }
  
  Ответить
  - Яна
    
    Март 18, 2011 в 12:55
    
    Лучше поздно, чем никогда! Забыла сказать вам спасибо! Ваш код мне тогда очень помог! Благодарю за помощь!
    
    Ответить
footballer

Март 11, 2011 в 14:23

А у меня все получилось синим цветом после установки. Пришлось поменять в первой строчке #00F на свой. Акцентируйте на этом внимание, не все же знают css.

Ответить
- Vladimir
  
  Март 11, 2011 в 17:50
  
  footballer, а как использовать решение на CSS без знания самого CSS? Предполагается, что кое-какие знания по теме у читателя всё же есть.
  
  Ответить
Иван

Декабрь 14, 2011 в 20:10

«Удивится» не работает в Chrome и Chromium
Без обид.

Ответить
- Vladimir
  
  Декабрь 14, 2011 в 21:22
  
  Вполне может быть — когда я это писал не было ни Хрома, ни Хромиума.
  
  Ответить