Создание двух эксклюзивных складных вещей между собой - PullRequest
Новая
       2

Создание двух эксклюзивных складных вещей между собой

0 голосов
/ 26 мая 2020

Я пытаюсь добавить на веб-сайт два раздела, оба из которых являются сворачиваемыми, а один из них по умолчанию свернут. В сочетании с кнопкой, которая при нажатии сворачивает другой раздел и разворачивает исходный. в правильном направлении, как изменить скрипт, чтобы он действовал так, как я объяснил?

Спасибо!

1 Ответ

0 голосов
/ 26 мая 2020

Кажется, это решает проблему, теперь мне просто нужно изменить кнопку при нажатии:) 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.contentcoll {
  padding: 0 18px;
  display: block;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<div class="contentcoll">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type="button" class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    var contentcoll = this.previousElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
      contentcoll.style.display = "block";
    } else {
      content.style.display = "block";
      contentcoll.style.display = "none";
    }
  });
}
</script>

</body>
</html>
...