0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В этой статье рассказазываю как создать аккордеон, используя только стили.</p>
1
<p>В этой статье рассказазываю как создать аккордеон, используя только стили.</p>
2
<h2>Содержание</h2>
2
<h2>Содержание</h2>
3
<ul><li><a>Разметка</a></li>
3
<ul><li><a>Разметка</a></li>
4
<li><a>Стили</a></li>
4
<li><a>Стили</a></li>
5
<li><a>Разберем по частям</a></li>
5
<li><a>Разберем по частям</a></li>
6
</ul><h2>Разметка</h2>
6
</ul><h2>Разметка</h2>
7
<p>Вместо добавления дополнительного класса будем ориентироваться на псевдокласс</p>
7
<p>Вместо добавления дополнительного класса будем ориентироваться на псевдокласс</p>
8
<p>элемента input.</p>
8
<p>элемента input.</p>
9
<h2>Стили</h2>
9
<h2>Стили</h2>
10
<h2>Разберем по частям</h2>
10
<h2>Разберем по частям</h2>
11
<p>Скрываем чекбокс:</p>
11
<p>Скрываем чекбокс:</p>
12
<p><em>Правильней это делать через паттерн visually hidden, но для учебного примера хватит.</em></p>
12
<p><em>Правильней это делать через паттерн visually hidden, но для учебного примера хватит.</em></p>
13
<p>Задаем стили для ответа:</p>
13
<p>Задаем стили для ответа:</p>
14
<p>И описываем правила для раскрытого аккордеона:</p>
14
<p>И описываем правила для раскрытого аккордеона:</p>
15
<p>Пара слов об анимации - она не самая удачная:</p>
15
<p>Пара слов об анимации - она не самая удачная:</p>
16
<p>Связано это с тем, что height: auto; нельзя анимировать через transition, необходимо знать точное значение. Именно поэтому, в качестве хака, мы используем padding.</p>
16
<p>Связано это с тем, что height: auto; нельзя анимировать через transition, необходимо знать точное значение. Именно поэтому, в качестве хака, мы используем padding.</p>
17
<p>Если такая анимация вас устраивает - считайте вам повезло, а если она и вовсе не нужна - читайте следующую статью про создание аккордеона на чистом HTML.</p>
17
<p>Если такая анимация вас устраивает - считайте вам повезло, а если она и вовсе не нужна - читайте следующую статью про создание аккордеона на чистом HTML.</p>
18
<p>Актуальное демо смотрите в моем<a>codepen</a>.</p>
18
<p>Актуальное демо смотрите в моем<a>codepen</a>.</p>