Я использую разборный код divs здесь: https://www.w3schools.com/howto/ howto_js_collapsible.asp

Разборные div по умолчанию скрыты, но я не могу понять, как отредактировать JavaScript, чтобы он был таким, чтобы они все были видимы по умолчанию и скрыты только при нажатии кнопки, чтобы скрыть их.

Любая помощь приветствуется. Спасибо! - Лорен

2
BluSkye218 23 Апр 2020 в 10:00

2 ответа

Вам действительно нужно изменить CSS .content на display: block;, но вам также придется изменить JavaScript, чтобы при щелчке по открытому свернутому объекту он закрывался. В противном случае вам придется дважды щелкнуть по нему, чтобы закрыть, так как при первом щелчке на нем все еще нет content.style.display.

В частности, эта проверка здесь:

if (!content.style.display || content.style.display === "block") {
  content.style.display = "none";
} else {
  content.style.display = "block";
}

Смотрите фрагмент ниже:

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;

    if (!content.style.display || content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
.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: block;
  overflow: hidden;
  background-color: #f1f1f1;
}
<h2>Collapsibles</h2>

<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</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>

<p>Collapsible Set:</p>
<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>
<button type="button" class="collapsible">Open Section 2</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>
<button type="button" class="collapsible">Open Section 3</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>
1
Luís Ramalho 23 Апр 2020 в 07:12

Измените CSS с display: none на display: block

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: block; // was hidden
  overflow: hidden;
  background-color: #f1f1f1;
}
0
Jay Bee 23 Апр 2020 в 07:05