1

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

const accordion = document.querySelectorAll(".accordion__item");

accordion.forEach((item) => {
  item.addEventListener("click", function(e) {

    if (this.classList.contains("active")) {
      this.classList.remove("active")
    } else {
      accordion.forEach((child) => {
        child.classList.remove("active")
      })
      this.classList.add("active")
    }
  })
})
.accordion__item {
  border: 1px solid gray;
  border-bottom: none;
  border-radius: 2px;
}

.accordion__item:last-child {
  border-bottom: 1px solid gray;
}

.accordion__item.active .accordion__content {
  max-height: 350px;
}

.accordion__btn {
  padding: 12px 20px;
  background-color: #f7f7f7;
  font-size: 16px;
  color: #575757;
  cursor: pointer;
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  color: black;
  font-size: 15px;
  transition: max-height 0.7s linear;
}

.accordion__content--text {
  padding: 20px;
  color: #575757;
}
HTML:
<div class="accordion">
  <div class="accordion__item">
    <div class="accordion__btn">trigger</div>
    <div class="accordion__content">
      <div class="accordion__content--text">
        <h3>lololo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam mollitia maiores excepturi assumenda, quaerat sunt architecto reprehenderit sint minima illo nisi cumque in similique distinctio voluptatum odit veritatis qui deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis hic doloribus asperiores? Ut explicabo, deleniti enim aspernatur corporis asperiores necessitatibus ipsum consequuntur, quas provident nihil animi nam molestias ullam. Perspiciatis,
          rerum ut inventore architecto accusantium rem recusandae velit exercitationem, quos consequuntur vero magni reiciendis dicta ipsa odio consectetur temporibus ab, iusto quam praesentium nihil? Obcaecati, velit voluptatibus reiciendis at consequatur
          vero deserunt! Ex at soluta sapiente vero. Optio exercitationem labore veritatis at natus eum placeat impedit nostrum nihil quasi fugit, animi incidunt unde qui facilis et ipsa maiores. Ullam modi rem laboriosam numquam ex aspernatur placeat
          eligendi. Dicta, dolorum totam!</p>
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__btn">trigger</div>
    <div class="accordion__content">
      <div class="accordion__content--text">
        <h3>lololo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam mollitia maiores excepturi assumenda, quaerat sunt architecto reprehenderit sint minima illo nisi cumque in similique distinctio voluptatum odit veritatis qui deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis hic doloribus asperiores? Ut explicabo, deleniti enim aspernatur corporis asperiores necessitatibus ipsum consequuntur, quas provident nihil animi nam molestias ullam. Perspiciatis,
          rerum ut inventore architecto accusantium rem recusandae velit exercitationem, quos consequuntur vero magni reiciendis dicta ipsa odio consectetur temporibus ab, iusto quam praesentium nihil? Obcaecati, velit voluptatibus reiciendis at consequatur
          vero deserunt! Ex at soluta sapiente vero. Optio exercitationem labore veritatis at natus eum placeat impedit nostrum nihil quasi fugit, animi incidunt unde qui facilis et ipsa maiores. Ullam modi rem laboriosam numquam ex aspernatur placeat
          eligendi. Dicta, dolorum totam!</p>
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__btn">trigger</div>
    <div class="accordion__content">
      <div class="accordion__content--text">
        <h3>lololo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam mollitia maiores excepturi assumenda, quaerat sunt architecto reprehenderit sint minima illo nisi cumque in similique distinctio voluptatum odit veritatis qui deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis hic doloribus asperiores? Ut explicabo, deleniti enim aspernatur corporis asperiores necessitatibus ipsum consequuntur, quas provident nihil animi nam molestias ullam. Perspiciatis,
          rerum ut inventore architecto accusantium rem recusandae velit exercitationem, quos consequuntur vero magni reiciendis dicta ipsa odio consectetur temporibus ab, iusto quam praesentium nihil? Obcaecati, velit voluptatibus reiciendis at consequatur
          vero deserunt! Ex at soluta sapiente vero. Optio exercitationem labore veritatis at natus eum placeat impedit nostrum nihil quasi fugit, animi incidunt unde qui facilis et ipsa maiores. Ullam modi rem laboriosam numquam ex aspernatur placeat
          eligendi. Dicta, dolorum totam!</p>
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__btn">trigger</div>
    <div class="accordion__content">
      <div class="accordion__content--text">
        <h3>lololo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam mollitia maiores excepturi assumenda, quaerat sunt architecto reprehenderit sint minima illo nisi cumque in similique distinctio voluptatum odit veritatis qui deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis hic doloribus asperiores? Ut explicabo, deleniti enim aspernatur corporis asperiores necessitatibus ipsum consequuntur, quas provident nihil animi nam molestias ullam. Perspiciatis,
          rerum ut inventore architecto accusantium rem recusandae velit exercitationem, quos consequuntur vero magni reiciendis dicta ipsa odio consectetur temporibus ab, iusto quam praesentium nihil? Obcaecati, velit voluptatibus reiciendis at consequatur
          vero deserunt! Ex at soluta sapiente vero. Optio exercitationem labore veritatis at natus eum placeat impedit nostrum nihil quasi fugit, animi incidunt unde qui facilis et ipsa maiores. Ullam modi rem laboriosam numquam ex aspernatur placeat
          eligendi. Dicta, dolorum totam!</p>
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__btn">trigger</div>
    <div class="accordion__content">
      <div class="accordion__content--text">
        <h3>lololo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam mollitia maiores excepturi assumenda, quaerat sunt architecto reprehenderit sint minima illo nisi cumque in similique distinctio voluptatum odit veritatis qui deleniti.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis hic doloribus asperiores? Ut explicabo, deleniti enim aspernatur corporis asperiores necessitatibus ipsum consequuntur, quas provident nihil animi nam molestias ullam. Perspiciatis,
          rerum ut inventore architecto accusantium rem recusandae velit exercitationem, quos consequuntur vero magni reiciendis dicta ipsa odio consectetur temporibus ab, iusto quam praesentium nihil? Obcaecati, velit voluptatibus reiciendis at consequatur
          vero deserunt! Ex at soluta sapiente vero. Optio exercitationem labore veritatis at natus eum placeat impedit nostrum nihil quasi fugit, animi incidunt unde qui facilis et ipsa maiores. Ullam modi rem laboriosam numquam ex aspernatur placeat
          eligendi. Dicta, dolorum totam!</p>
      </div>
    </div>
  </div>
</div>

1
  • как лучше сформулировать? 21 мар 2021 в 10:05

1 ответ 1

0

Вот так типа?

.accordionExample {
  max-width: 500px;
  margin: 0 auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<div class="accordion accordionExample" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Элемент аккордеона #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Это тело аккордеона первого элемента.</strong> По умолчанию оно скрыто, пока плагин сворачивания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Элемент аккордеона #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Это тело аккордеона второго элемента.</strong> По умолчанию он скрыт, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Элемент аккордеона #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Это тело аккордеона третьего элемента.</strong> По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
</div>

7
  • Да, так, но не бутстрапом а чистим js 21 мар 2021 в 13:40
  • @DartVinnie зачем? ну своё потом на CSS перепишите CSS стили 21 мар 2021 в 15:03
  • @DartVinnie чтобы это сделать всё адекватно вам придётся написать открытие/закрытие элемента с анимацией на чистом JS, что весьма непросто для начинающего. 21 мар 2021 в 15:07
  • Ну тогда для начала думаю весь контент в акордеоне сделать однакового размера? 22 мар 2021 в 8:51
  • @DartVinnie нет, элементы аккордеона должны быть любого размера 22 мар 2021 в 10:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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