0

Как в этом коде сделать анимацию раскрытия контента, когда открываешь новый, то старый плавно с ним закрывался, если размер каждого блока с контентом разный?

<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")
    }
  })
})
3
  • Уважаемый ! Вы уже создали 2 дубликата одного и того же вопроса ...Вы поясните что хотите получить ? 23 мар 2021 в 10:49
  • Хочу , чтоб контент бил разного размера, и анимация такая когда откритий блок аккордеона, и я нажимаю на другой, етот блок не ждал пока откроеться новий а плавно с ним закривался, так понятно или нет? 23 мар 2021 в 11:17
  • codepen.io/topicstarter/pen/gOgbYJe вот это проверь и отпишись 23 мар 2021 в 11:19

1 ответ 1

2

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

accordion.forEach((item) => {
    item.addEventListener("click", function(e) {
        let content = this.querySelector('.accordion__content');
        if (this.classList.contains("active")) {
            this.classList.remove("active");
            content.style.maxHeight = '0';
        } else {
            accordion.forEach((child) => {
                child.classList.remove("active");
                child.querySelector('.accordion__content').style.maxHeight = '0';
            });
            this.classList.add("active");
            content.style.maxHeight = content.scrollHeight + "px";
        }
    })
})
.accordion__item {
    border: 1px solid gray;
    border-bottom: none;
    border-radius: 2px;
}

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

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

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

.accordion__content--text {
    padding: 20px;
    color: #575757;
}
<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>
                <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>
                <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>

1
  • Огромное спасибо, з самого начала похож код написал, но не до конца, думал бредятина и удалил, спасибо друг 23 мар 2021 в 17:09

Ваш ответ

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

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