У меня есть простой аккордеон, разработанный с использованием чистого javascript без jQuery и Pure CSS, и все работает хорошо. Проблема в том, что первый аккордеон расширялся при загрузке страницы, я пробовал много способов, используя CSS и JS Но это не работает, я плохо разбираюсь в JavaScipt, я пытался удалить класс active при загрузке окна, и он удалился, но все равно расширился!! не могли бы вы помочь с этим?

// ============== toggle accordion =================//
let header = document.querySelectorAll(".accordion-header");



// ============= get all accoridon header =============//
header.forEach(
  (header) => {
    header.addEventListener("click", function(e) {
      let accordion = document.querySelectorAll(".accordion");
      let parentElm = header.parentElement;
      let siblings = this.nextElementSibling;



      // ============= remove accordion body height ==========//
      accordion.forEach((element) => {
        element.children[1].style.maxHeight = null;
      });

      // =========== toggle active class ==============//
      parentElm.classList.toggle("active");
      if (parentElm.classList.contains("active")) {
        // ============== remove active class from all the accordions ===//
        accordion.forEach((element) => {
          element.classList.remove("active");
        });
        // ============== toggle active class where we clicked ========//

        parentElm.classList.toggle("active");
        // ============= set max height ============//
        if (siblings.style.maxHeight) {
          siblings.style.maxHeight = null;
        } else {
          siblings.style.maxHeight = siblings.scrollHeight + "px";
        }
      }
    });
  }
);

window.onload = function() {
  header[0].click();
}
.accordion-container {
  padding: 0 100px;
}

.accordion .accordion-header {
  padding: 15px 20px;
  cursor: pointer;
  position: relative;
}

.accordion .accordion-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-decoration: underline;
}

.accordion .accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height ease 0.5s;
  padding: 0 20px;
}

.accordion .accordion-body p {
  font-weight: 400;
  padding-bottom: 20px;
  line-height: 1.5;
}
<div class="accordion">
  <div class="accordion-header">
    <h2>Accordion Header</h2>
  </div>
  
  <div class="accordion-body">
    <p>Accordion Body</p>
  </div>
</div>

<div class="accordion">
  <div class="accordion-header">
    <h2>Accordion Header</h2>
  </div>
  
  <div class="accordion-body">
    <p>
      <p>Accordion Body</p>
    </p>
  </div>
</div>
0
Kareem Sultan 30 Май 2023 в 21:12
Я нажал волшебную кнопку Tidy в вашем фрагменте. Теперь вы можете легче увидеть проблемы, такие как вложенные элементы абзаца.
 – 
isherwood
30 Май 2023 в 21:14

1 ответ

Лучший ответ

Приведенный ниже код вызовет нажатие на первый заголовок. Что заставит этот аккордеон расшириться. Просто удалите этот код, и он перестанет автоматически расширяться.

window.onload = function() {
  header[0].click();
}
2
imvain2 30 Май 2023 в 21:22