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

отрывашка зависимая js
DVV,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
document.addEventListener("DOMContentLoaded", accordeon);

function accordeon() {
    var accordTitles = document.querySelectorAll(".accordTitles");
    var accordBlocks = document.querySelectorAll(".accordBlocks");
    var index;

    function closeBlocks(i) {
        accordTitles[i].style.color = "black";
        accordBlocks[i].style.display = "none"
    }

    function openBlocks(i) {
        accordTitles[i].style.color = "#fa05f6";
        accordBlocks[i].style.display = "block";
    }
    [].forEach.call(accordTitles, function(btn, i) {
        closeBlocks(i);
        btn.addEventListener("click", function() {
           if (index !== i) openBlocks(i);
           if (index !== void 0) closeBlocks(index);
           index = index !== i ? i : void 0
        })
    })
};
  </script>
</head>

<body>
<div class="accordTitles">1</div>
<div class="accordTitles">2</div>
<div class="accordTitles">3</div>
<div class="accordTitles">4</div>
<div class="accordTitles">5</div>
<div class="accordBlocks">1</div>
<div class="accordBlocks">2</div>
<div class="accordBlocks">3</div>
<div class="accordBlocks">4</div>
<div class="accordBlocks">5</div>
</body>
</html>

Последний раз редактировалось рони, 07.09.2018 в 16:23.
Ответить с цитированием