JSFiddle - React, Tailwind, and code Playground
HTML
<div class="spoiler">
<p class="headSpoil">Заголовок</p>
<p class="hide">Тело спойлера. пыщь-пыщь</p>
<p>Тут какой-то левый текст</p>
</div>
<div class="spoiler">
<p class="headSpoil">Спойлер 2</p>
<p class="hide">Тело спойлера. пыщь-пыщь</p>
<p>Тут какой-то левый текст</p>
</div>
<div class="spoiler">
<p class="headSpoil">Спойлер 3</p>
<p class="hide">Тело спойлера. пыщь-пыщь</p>
<p>Тут какой-то левый текст</p>
</div>
<div class="spoiler">
<p class="headSpoil">Спойлер 4</p>
<p class="hide">Тело спойлера. пыщь-пыщь</p>
<p>Тут какой-то левый текст</p>
</div>
CSS
p {margin:0;padding:0;}
.spoiler {
width: 500px;
margin: 20px 0;
}
.headSpoil {
background: #dfdfdf;
padding: 1px 5px;
border: 1px solid #000;
width:100px;
cursor: pointer;
overflow:hidden;
}
.show {
border: 1px solid #000;
padding: 2px 5px;
margin: -1px 0 0 0;
overflow: hidden;
}
.hide {
display: none;
border-top: 1px solid #000;
}
JavaScript
//каcтомный метод для ИЕ
function searchClass(sClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var elements = node.getElementsByTagName(tag);
var elemLength = elements.length;
var pattern = new RegExp("(^|\\s)"+sClass+"(\\s|$)");
for (var i = 0, j = 0; i < elemLength; i++) {
if ( pattern.test(elements[i].className) ) {
classElements[j] = elements[i];
j++;
}
}
return classElements;
};
//******************
//сам скрипт спойлера
function showSpoil(){
if (document.getElementsByClassName){
//для браузеров
var els = document.getElementsByClassName("spoiler");
for (var i =0;i<els.length;i++){
els[i].getElementsByTagName("P")[0].onclick = function(){
if (this.nextSibling.nextSibling.className == "hide")
this.nextSibling.nextSibling.className = "show";
else
this.nextSibling.nextSibling.className = "hide"; }
}
}
else {
//для ИЕ
var els = searchClass("spoiler",document,"DIV")
for (var i =0;i<els.length;i++){
els[i].getElementsByTagName("P")[0].onclick = function(){
if (this.nextSibling.className == "hide")
this.nextSibling.className = "show";
else
this.nextSibling.className = "hide"; }
}
}
};
showSpoil(); //типо вызов