Pages Menu Stijit.com
Twitter
Categories Menu
Гармошка на javascript — показать / спрятать блок в javascript

Гармошка на javascript — показать / спрятать блок в javascript

Иногда для правильной информационной архитектуры страницы нужно показать / спрятать блок или спрятать часть текста (да и любого другого контента) во вкладки и показывать его только если пользователь нажмет на вклдаку. Рассмотрим два варианта как сделать сворачивающиеся и разворачивающиеся вкладки — или проще: как сделать гармошку на javascript. Для обоих вариантов можно использовать один и тот же css:


html, body {
  height: 100%;
}
h2, div, p {
  margin: 0;
  padding: 0;
}

.tab {
  width: 100%;
  height: 10%;
  background-image: url(edge.png);
  background-repeat: repeat-x;
  border: 1px solid orange;
}
.tab:hover {
  background-color: #eee;
  cursor: pointer;
}
.tab h2 {
  padding: 10px 20px;
  background-color: orange;
}
.tab h2:hover {
  padding: 10px 20px;
  background-color: #eee;
}

.expanded {
  height: 45%;
  padding-bottom: 2%;
  border-right: 2px dashed orange;
  border-left: 2px dashed orange;
  border-bottom: 2px dashed orange;
}

.displayed {
  display: block;
  padding: 20px 10px;
}

.hidden {
  display: none;
}

Гармошка вариант 1 — с onclick на вкладках

В этом варианте для того чтобы показывать и скрывать текст мы привязываем срабатывание события на onclick каждой вкладки:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="edge.css">
</head>
<body>
  <div class="tab" id="0" onclick="expand(this.id);">
    <h2>Click me!</h2>
    <p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="tab" id="1" onclick="expand(this.id);">
    <h2>Click me!</h2>
    <p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="tab" id="2" onclick="expand(this.id);">
    <h2>Click me!</h2>
    <p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <script>

    function expand(id) {
      var tabs = document.querySelectorAll("div.tab"),
      texts = document.querySelectorAll("div.tab>p");
      console.log(id);

      if (texts[id].className == "displayed") {
        texts[id].className = "hidden";
        tabs[id].classList.remove("expanded");
      } else {
        for (var i = 0; i < texts.length; i++) {
          texts[i].className = "hidden";
          tabs[i].classList.remove("expanded");
          texts[id].className = "displayed";
          tabs[id].classList.add("expanded");
        }
      }
    };

  </script>

</body>
</html>

Гармошка на javascript вариант 2 - все в коде

Визуально блоки показываются и прячутся так же как и в первом варианте. Но здесь мы все делаем внутри скрипта, не используя onclick непосредственно на самих вкладках, а получая к ним доступ уже в самом скрипте:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="edge.css">
</head>
<body>
  <div class="tab" id="0">
    <h2>Click me!</h2>
    <p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="tab" id="1">
    <h2>Click me!</h2>
    <p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="tab" id="2">
    <h2>Click me!</h2>
    <p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <script>

    var tabs = document.querySelectorAll("div.tab"),
    texts = document.querySelectorAll("div.tab>p");

    tabs[0].onclick = function expand() {
      if (texts[0].className == "displayed") {
        texts[0].className = "hidden";
        tabs[0].classList.remove("expanded");
      } else {
        for (var i = 0; i < texts.length; i++) {
          texts[i].className = "hidden";
          tabs[i].classList.remove("expanded");
          texts[0].className = "displayed";
          tabs[0].classList.add("expanded");
        }
      }
    };
    tabs[1].onclick = function expand() {
      if (texts[1].className == "displayed") {
        texts[1].className = "hidden";
        tabs[1].classList.remove("expanded");
      } else {
        for (var i = 0; i < texts.length; i++) {
          texts[i].className = "hidden";
          tabs[i].classList.remove("expanded");
          texts[1].className = "displayed";
          tabs[1].classList.add("expanded");
        }
      }
    };
    tabs[2].onclick = function expand() {
      if (texts[2].className == "displayed") {
        texts[2].className = "hidden";
        tabs[2].classList.remove("expanded");
      } else {
        for (var i = 0; i < texts.length; i++) {
          texts[i].className = "hidden";
          tabs[i].classList.remove("expanded");
          texts[2].className = "displayed";
          tabs[2].classList.add("expanded");
        }
      }
    };

  </script>

</body>
</html>

Как видите, ничего сложного в создании гармошки на javascript нет. Если возникли какие-то вопросы или предложения по скрипту - пишите в комментариях.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *