JSFiddle - React, Tailwind, and code Playground
HTML
<div class="titleSpoiler">Показать изображения | Скрыть все изображения</div>
<div class="bodySpoiler">
Текст под спойлером
<br> имеет класс spoiler_body.
<br> Для придания стиля данному тексту
<br> просто добавьте еще один класс.
<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
<br>
<div class="titleSpoiler">Показать цитату | Скрыть цитирование автора</div>
<div class="bodySpoiler">
А это уже текст второго спойлера!
<br> Данный спойлер также позволяет скрывать
<br> излишнее на сайте!
<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
CSS
.titleSpoiler {
font-weight: bold;
cursor: pointer;
}
.bodySpoiler {
display: none;
font-style: italic;
}
.collapseSpoiler {
margin: 16px 0 0 0;
color: blue;
cursor: pointer;
}
JavaScript
$(document).ready(function() {
$('.titleSpoiler').click(function() {
$(this).next('.bodySpoiler').slideToggle(200);
return false;
});
});
$('.collapseSpoiler').click(function() {
$(this).parent('.bodySpoiler').slideToggle(200);
});