Есть какой-нибудь готовый блок спойлера?

Question

[Дмитрий Баскаков]

Нужно что-то очень близкое к этому *тык*

Понимаю, что можно с JQuery через slide функции делать, но нужно ещё быстрее и максимально универсально, чтобы такие спойлеры можно было независимо размещать по странице, а внутри можно было любой контент размещать.

Comments

[Тарас Шульга]

Так напиши один раз и копипасть, в чем проблема?)

[rusikus]

<details>
<summary>Мой заголовок 1</summary>
<p>Содержание спойлера 1</p>
</details>
 
<details>
<summary>Мой заголовок 2</summary>
<p>Содержание спойлера 2</p>
</details>
 
<details>
<summary>Мой заголовок 3</summary>
<p>Содержание спойлера 3</p>
</details>

details {
border: 1px solid #999;
border-radius: 5px;
margin: 0 2em .4em 2em;
padding: 1.04%;
}
 
details {
margin: 1em;
cursor: pointer;
}
 
summary {
border-radius: 5px;
cursor: pointer;
margin: -1%;
padding: 8px 10px;
background: -webkit-linear-gradient(top, #f3f3f3 50%, #e6e6e6 50%);
}

[Дмитрий Баскаков]

Тарас Шульга, нужен только для одного проекта, а если я буду писать, то либо увлекусь и буду что-то нормальное писать, либо быстро напишу и потом ещё полчаса дебажить буду

[Дмитрий Баскаков]

rusikus, ух как, о таком не знал(или забыл), но мне нужно чтобы были анимации раскрытия и скрытия, а так я запомню этот тег)

Answer 1

[Дмитрий Баскаков]

Где-то на просторах интернета нашел:
https://alligator.io/css/collapsible/