Когда делаешь аккордеон или выпадающее меню (dropdown) на CSS, возникают проблемы из-за невозможности использовать height: auto;. В результате приходится задействовать JavaScript для приемлемой анимации.

В то же время элегантное решение на чистом CSS существует и использует grid-template-rows:

<div class="content">
  <div class="inside">
    Totally arbitrary content! 
  </div>
</div>

.content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 1s;
  overflow: hidden;
}
.content .inside {
  min-height: 0;
}
.content.expanded {
  grid-template-rows: 1fr;
}

Песочница

#tip #css #accordion

После 20 лет мучений с раскрытием "аккордеона" чистым CSS браузеры (пока только Chrome) скоро подарят нам еще один, самый естественный способ:

height: calc-size(auto);

Песочница

Функция работает аналогично calc(), но может принимать в качестве аргумента auto, min-height и аналогичные параметры.

Раньше мы уже писали о другом pure CSS варианте для аккордеона - через grid-template-row

#tip #css #accordion

Мы уже писали о двух прорывах CSS в области анимации раскрытия блоков (аккордеон). Еще одна старая проблема - анимация диалогов и всплывающих окошек.

Дело в том, что правило display: имеет дискретный тип анимации, это значит плавный переход display:none <-> display:block не может быть выполнен через transition. Он будет скачком. В результате для анимаций появления и исчезания приходилось подключать JavaScript с setTimeout() и иными ухищрениями.

Теперь в Chromium браузерах появилась поддержка transition-behavior: allow-discrete; и @starting-style, которые решают эту проблему:

dialog {
    display: none;   /* user agent style */
    opacity: 0;
    /* translate: 0 -25vh; */
    transition-property: display opacity;
    transition-duration: 1s;
    transition-behavior: allow-discrete;
}

dialog[open] {
    display: block;   /* user agent style */
    opacity: 1;
    @starting-style {
        opacity: 0;
        /* translate: 0 0; */
    }
}

Safari и Firefox уже на пути реализации этих CSS правил. А пока анимация в них просто не будет работать.

Аналогичная анимация применяется к overlay или ::backdrop

Есть еще один уже полностью рабочий вариант анимации появления диалогов через keyframes, об этом в следующий раз

#css

Раскрывающиеся аккордеоны удобно делать через стандартный details HTML элемент.

Чтобы сделать группу (раскрытым может быть только один элемент единовременно), нужно добавить атрибут name с одним и тем же значением.

<details name="some-group">
  <summary>1</summary>
  <p>…</p>
</details>
<details name="some-group">
  <summary>2</summary>
  <p>…</p>
</details>
<details name="some-group">
  <summary>3</summary>
  <p>…</p>
</details>

Также details поддерживает хорошую стилизацию - пример
(Небольшая часть этого работает пока только в Chromium)

#html #accordion