ArtemBielykh,
вариант ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/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;
}
.open + .content{
display: block;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var elem = document.body;
elem.addEventListener("click", openCloseSpoiler);
function openCloseSpoiler(event) {
var whereDoClick = event.target;
if (whereDoClick.classList.contains("heading")) {
var parent = whereDoClick.parentNode.parentNode;
[].forEach.call(parent.querySelectorAll(".heading"), function(el) {
el == whereDoClick ? el.classList.toggle("open") : el.classList.remove("open")
})
}
};
});
</script>
</head>
<body>
<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>
</body>
</html>