Показать сообщение отдельно
  #2 (permalink)  
Старый 20.01.2017, 22:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,427

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>
Ответить с цитированием