JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spoiler">
	<div class="spoiler-body">Скрытый текст, который появится при наведении</div>
	<b class="spoiler-title"></b>
</div> 
<div class="spoiler">
	<div class="spoiler-body opened">Изначально не скрытый текст, который появится при наведении</div>
	<b class="spoiler-title"></b>
</div> 
<div class="spoiler">
	<div class="spoiler-body">Скрытый текст, который появится при наведении</div>
	<b class="spoiler-title"></b>
</div>

CSS

.spoiler-body {
  display: none;
}

.opened {
  display: block !important;
}

JavaScript

$('.spoiler').each(function(){
	var self = $(this);
	self.on('click', '.spoiler-title', function(e){
		var sb = $('.spoiler-body', self);
		sb.toggleClass('opened');
		$(this).html(sb.hasClass('opened') ? 'Скрыть текст' : 'Показать текст');
	});
	$($('.spoiler-title', self)).html($('.spoiler-body', self).hasClass('opened') ? 'Скрыть текст' : 'Показать текст');
});