JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">

		<div class="spoiler-box" id="slider-box">

			<div class="spoiler">
				<div class="heading">Spoiler title</div>
				<div class="content">
					
					<div class="spoiler">
						<div class="heading">Spoiler title</div>
						<div class="content">Spoiler content</div>
					</div>

					<div class="spoiler">
						<div class="heading">Spoiler title</div>
						<div class="content">Spoiler content</div>
					</div>

				</div>
			</div>

			<div class="spoiler">
				<div class="heading">Spoiler title</div>
				<div class="content">Spoiler content</div>
			</div>

			<div class="spoiler">
				<div class="heading">Spoiler title</div>
				<div class="content">Spoiler content</div>
			</div>	

			<div class="spoiler">
				<div class="heading">Spoiler title</div>
				<div class="content">Spoiler content</div>
			</div>

		</div>

	</section>

CSS

html, body{
	margin: 0;
	padding: 0;
	height: 100%;
	box-sizing: border-box;
}
.container{
	width: 60%;
	margin: auto;
}
.spoiler-box{
	width: 100%;
}
.spoiler{
	border: 1px solid #ccc;
	margin-bottom: 0.5em;
}
.heading, .content{
	padding: 0.5em;
}
.heading{
	background-color: #eee;
	cursor: pointer;
}
.content{
	display: none;
}
.content[style="display: block;"]{
	border-top: 1px solid #ccc;
}

JavaScript

"use strict"

var elem = document.body;

document.addEventListener("DOMContentLoaded", addId); // addId cрабатывает как только построится DOM
elem.addEventListener("click", openCloseSpoiler); // openCloseSpoiler cрабатывает по клику

// Функция присваивает id все div.content
function addId(){

	var getAllContent = document.getElementsByClassName('content');

	for(var i = 0; i < getAllContent.length; i++ ){

			var idName = 'sliderNumber-' + i;
			getAllContent[i].setAttribute('id', idName);

		};

}

// Функция открывает и закрывает нужные нам div.content
function openCloseSpoiler(event){ // Без event работает везде, кроме firefox
	
	var whereDoClick = event.target;
	var getAllContent = document.getElementsByClassName('content');
  var newSpan = document.createElement('span'); 

  // Если кликнули на body или slider-box
  if(whereDoClick == elem || whereDoClick == document.getElementById('slider-box') ){ 

  	for(var i = 0; i < getAllContent.length; i++ ){

			getAllContent[i].style.display = 'none';

		};

	// Если кликнули на div.heading
  } else if(whereDoClick.parentElement.parentElement == document.getElementById('slider-box') && whereDoClick.nextElementSibling != undefined){

  	if(getComputedStyle(whereDoClick.nextElementSibling).display == "none"){ // Открываем

  		whereDoClick.nextElementSibling.style.display = 'block';

  	} else{

  		whereDoClick.nextElementSibling.style.display = 'none'; // Закрываем

  	}

  	for(var i = 0; i < getAllContent.length; i++ ){ // Открыт только спойлер, по которому кликнули

  		if(whereDoClick.nextElementSibling != getAllContent[i]){
  			getAllContent[i].style.display = 'none';
  		}

  	}
  // Если есть вложенные спойлеры и мы кликаем по ним или на блоке content, в который они вложены
  } else {
  	
  	if(whereDoClick.hasAttribute('id')){ 

  		// Кликноли просто по content
  		// whereDoClick.style.display = 'none'; // * тут на Ваш вкус!!! Можно закрывать сам блок content
 ...