Показать сообщение отдельно
  #3 (permalink)  
Старый 09.12.2017, 14:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

vospa,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide{
      display: none;
  }
 </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var btn = document.querySelectorAll("[data-id]"),
        block = document.querySelectorAll(".toggle");
    [].forEach.call(btn, function(item, k) {
        item.dataset.text = item.textContent;
        var id = item.dataset.id;
        item.addEventListener("click", function(event) {
            event.preventDefault();
            [].forEach.call(block, function(el, i) {
                if (el.id == id) {
                  el.classList.toggle("hide");
                  el.classList.contains("hide") && block[0].classList.remove("hide")
                }
                else el.classList.add("hide");
            });
            [].forEach.call(btn, function(item, i) {
                var id = item.dataset.id;
                var el = document.getElementById(id)
                item.textContent = el.classList.contains("hide") ?  item.dataset.text : "Панель" ;
            })

        })
    })
});
  </script>
</head>

<body>
<a  class="button28" id="toggler2" href="#" data-id="info">Инфо</a><a  class="button28" id="toggler" href="#" data-id="desinger" >Лего</a>

<div id="front" class="toggle">front куча там всего</div>
<div id="desinger" class="toggle hide">Лего еще куча всего</div>
<div id="info" class="toggle hide">info ну и еще куча</div>

</body>
</html>
Ответить с цитированием