JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div id="apocontent">

[apospoiler=Заголовок спойлера]Здесь любая информация
  [apospoiler=Заголовок спойлера 2]Здесь любая информация 2[/apospoiler]
  [apospoiler=Заголовок спойлера 3]Здесь любая информация 3
    [apospoiler=Заголовок спойлера 4]Здесь любая информация 4[/apospoiler]
  [/apospoiler]
[/apospoiler]

<br><br>

[apospoiler]Этот спойлер без заголовка[/apospoiler]

</div>

CSS

.aposp {
  display:none;
  background: #fee;
  padding: 5px;
  border: 1px dashed #ccc;
}

.aposptitle {
  width: 100%;
  height: 20px;
  color: #333;
  background: #ddd;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
  padding-top: 5px;
  margin-top: 5px;
}

JavaScript

$(function() {
$('#apocontent').html($('#apocontent').html().replace(/\[apospoiler=(.+?)\]/gi, '<div class="aposp" name="$1">').replace(/\[\/apospoiler\]/gi, '</div>').replace(/\[apospoiler\]/gi, '<div class="aposp">'));

$('div.aposp').each(function() {
var curtitle;
if($(this).attr('name')) {
curtitle = $(this).attr('name') + ' +';
} else {
curtitle = 'Спойлер +';
};
$(this).before('<div class="aposptitle">' + curtitle + '</div>');
});

$('div.aposptitle').click(function() {
if($(this).text().indexOf('+') != -1) {
$(this).html($(this).text().replace('+', '-'));
} else {
$(this).html($(this).text().replace('-', '+'));
};
$(this).next('.aposp').fadeToggle(300);
});
// imapo.ru 2016
});