Как в этом коде сделать анимацию раскрытия контента, когда открываешь новый, то старый плавно с ним закрывался, если размер каждого блока с контентом разный?
<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. Voluptatibus exercitationem deleniti, facilis assumenda illum doloremque itaque placeat in! Magnam, tenetur. Facere ad ullam sit expedita voluptatibus, quas temporibus? Itaque tenetur sit nostrum quisquam. Harum earum aliquam facere molestias dolores saepe?</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>
</div>
</div>
</div>
</div>
.accordion {
&__item {
border: 1px solid $gray;
border-bottom: none;
border-radius: 2px;
&:last-child {
border-bottom: 1px solid $gray;
}
&.active .accordion__content {
max-height: 500px;
}
}
&__btn {
padding: 12px 20px;
background-color: #f7f7f7;
font-size: 16px;
color: #575757;
cursor: pointer;
}
&__content {
max-height: 0;
overflow: hidden;
color: $black;
font-size: 15px;
transition: max-height 0.7s linear;
&--text {
padding: 20px;
color: #575757;
}
}
}
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")
}
})
})