1

у меня есть такой пример кода аккордеона, как сделать так, чтобы внутри аккордеон тоже мог открываться?

<!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;
    }
    
    .collapsible:after {
      content: '\002B';
      color: white;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }
    
    .active:after {
      content: "\2212";
    }
    
    .content {
      padding: 0 18px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #f1f1f1;
    }
  </style>
</head>

<body>


  <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>
    <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>
  </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;
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
  </script>

</body>

</html>

2
  • посмотрите это stackoverflow.com/questions/45346806/…
    – Aliskin
    Commented 27 июл. 2022 в 8:59
  • 4
    У Вас всё открывается, просто его не видно из-за max-height: 158px; на первом .content. Значит нужно сделать, чтобы при открытии второго .content - max-height рассчитывалось и менялось и для первого. Но я бы попробовал переделать логику, потому что такая реализация кажется мне не совсем правильной.
    – NDMX
    Commented 27 июл. 2022 в 9:03

1 ответ 1

1

Как я уже написал в комментариях, у Вас всё открывается, просто его не видно из-за max-height: 158px; на первом .content. Значит нужно сделать, чтобы при открытии каждого следующего .content - max-height рассчитывалось и менялось и для предыдущих.

Внесем необходимые правки.

Создаем массив и добавляем в него значения высоты каждого .content в аккордеоне:

let heightArray = [];
for (let i = 0; i < coll.length; i++) {
    heightArray.push(coll[i].nextElementSibling.scrollHeight);
}

При открытии какой-либо кнопки нам необходимо также менять высоту всех предыдущих .content для корректного отображения аккордеона, высчитываем и задаем новую высоту путем сложения предыдущих значений высоты:

for (let prevContent = 0; prevContent < i; prevContent++) {
    let sumHeight = 0;

    for (let prevContent = 0; prevContent <= i; prevContent++) {
        sumHeight = sumHeight + heightArray[prevContent];
    }

    coll[prevContent].nextElementSibling.style.maxHeight = sumHeight + 'px';
}

Также добавим закрытие всего внутреннего контента при закрытии родительского:

if (!this.classList.contains('active')) {
    for (let x = i + 1; x < coll.length; x++) {
        coll[x].classList.remove("active");
        coll[x].nextElementSibling.style.maxHeight = null;
    }
}

Мой рабочий вариант: (думаю можно сделать поизящнее, но логика должна быть ясна)

<!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;
    }
    
    .collapsible:after {
      content: '\002B';
      color: white;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }
    
    .active:after {
      content: "\2212";
    }
    
    .content {
      padding: 0 18px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #f1f1f1;
    }
  </style>
</head>

<body>


  <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>
    <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>
      <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>
        <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>
          <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>
        </div>
      </div>
    </div>
  </div>

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


    let heightArray = [];
    for (let i = 0; i < coll.length; i++) { // добавляем значения высоты каждого .content в массив по порядку
      heightArray.push(coll[i].nextElementSibling.scrollHeight);
    }

    for (let i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");

        if (!this.classList.contains('active')) { // при закрытии какой-либо кнопки закрывается также все внутренние кнопки и контент
          for (let x = i + 1; x < coll.length; x++) {
            coll[x].classList.remove("active");
            coll[x].nextElementSibling.style.maxHeight = null;
          }
        }

        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";

          for (let prevContent = 0; prevContent < i; prevContent++) { // при открытии какой-либо кнопки нам необходимо также менять высоту всех предыдущих .content для корректного отображения аккордеона, высчитываем новую высоту путем сложения предыдущих значений высоты
            let sumHeight = 0;

            for (let prevContent = 0; prevContent <= i; prevContent++) {
              sumHeight = sumHeight + heightArray[prevContent];
            }

            coll[prevContent].nextElementSibling.style.maxHeight = sumHeight + 'px';
          }
        }
      });
    }
  </script>

</body>

</html>

1
  • Спасибки Вам большое!!!
    – Eroy
    Commented 28 июл. 2022 в 5:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.