Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

[keydon2]

Круто. В идеале хочу совсем уйти от js на простеньких сайтах.

[ivan386]

Для старых браузеров можно собрать аналог details на css используя checkbox, label, div и селектор :checked.

Аналогично если не хочется Javascript использовать для автозакрывающихся details можно собрать аналог на radio, label, div и том же селекторе :checked.

[iefedorov]

Да, вы правы, ваш вариант — это что-то среднее между details и между кодом на JavaScript! И в ряде случаев :checked это идеальный вариант!)
Но семантика при этом опускается…

[s_berez]

Супер, спасибо за статью!

[Tetragonchik]

А я и не знал про тэги такие, спасибо :)

[b360124]

Спасибо за статью, но некоторые примеры неверны, хотя в Codepen все верно

details[open] > summary:before {
  transform: rotateZ(90deg);
}

а должно быть

details[open] > summary:before {
  transform: scale(1, -1);
}

[iefedorov]

Спасибо! Поправил!)

[namikiri]

border-radius: 8px;

Вот с этого-то момента Вы всё и испоганили.

В остальном спасибо за статью, открыл для себя новые возможности HTML5.

[iefedorov]

И вам спасибо! Но поясните, чем вам не угодил border-radius? или вам не понравился px? надо было в %?;)

[namikiri]

Богомерзкие скругления везде. Это выглядит игрушечно и нетехнологично. Да, субъективно, но и комментарии мы пишем от своего лица, так что имеем право.

[iefedorov]

понятно) это действительно субъективно, кому-то нравится, а кого-то раздражает…

[AxeFizik]

А что вы понимаете под словом «нетехнологично»?

[savostin]

Лично мне не нравятся px, особенно там, где этот размер не привязан, скажем, к изображению в px.

[we1]

А чтобы раскрытие было плавно можно сделать?

[iefedorov]

Если вы про плавное изменение высоты, то это тянет на отдельный пост на хабре)

Способов много, при этом идеального нет, у каждого свои плюсы и минусы…

Один из самых простых и часто используемых, использовать max-height.

CSS:

details summary ~ div{
  overflow: hidden;
}
details[open] summary ~ div{ 
  animation: sweep 2s ease-in-out;
}
@keyframes sweep {
  0%    {max-height:0;}
  100%  {max-height:2000px;}
}

HTML:

<details>
  <summary>Покажи-скрой меня</summary>
  <div>Скандинавская мифология — мифология древних скандинавов.</div>
</details>

[Named]

Почему так, а не через transition?

details summary ~ div{
  max-height: 0;
  overflow: hidden;
  transition: all 2s ease-in-out;
}
details[open] summary ~ div{ 
  max-height: 2000px;
}

Вроде попроще выглядит. Или там какие-то подводные камни?

[iefedorov]

1. Если использовать animation, то max-height ставится и снимается во время анимации. В вашем случае, после окончания анимации max-height остается, а текста может быть больше чем 2000px.
2. Ваш пример не работает.