Не получаеться сделать плавную анимацию

Question

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

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>

Answer 1

Вот так типа?

.accordionExample {
  max-width: 500px;
  margin: 0 auto;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

БЛОГ НА HUSL

Не получаеться сделать плавную анимацию

Ответы (1 шт):