JSFiddle - React, Tailwind, and code Playground
HTML
<div class="spoiler">
<a class="spoiler-open" href="#">Спойлер 1</a>
<div class="spoiler-body">
<p>Текст спойлера 1</p>
<a class="spoiler-close" href="#">Закрыть</a>
</div>
</div>
<div class="spoiler">
<a class="spoiler-open" href="#">Спойлер 2</a>
<div class="spoiler-body">
<p>Текст спойлера 2</p>
<a class="spoiler-close" href="#">Закрыть</a>
</div>
</div>
CSS
.spoiler {
padding: 3px;
margin: 3px;
border: 1px solid #ccc;
}
.spoiler .spoiler-body {
display: none;
}
JavaScript
$(document).ready( function(){
$('.spoiler').each( function() {
var spoiler = $(this);
$(this).find('.spoiler-open').click( function(e) {
e.preventDefault();
$(this).hide();
spoiler.find('.spoiler-body').show();
});
$(this).find('.spoiler-close').click( function(e) {
e.preventDefault();
spoiler.find('.spoiler-body').hide();
spoiler.find('.spoiler-open').show();
});
});
});