0
<div class="accordion">
        <div class="accordion__item">
          <div class="accordion__btn">trigger</div>
          <div class="accordion__content">Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="accordion__item">
          <div class="accordion__btn">trigger</div>
          <div class="accordion__content">content</div>
        </div>
      </div>

.accordion {
  &__item {
    border: 1px solid #000;
    margin-bottom: 5px;

    &.active .accordion__content {
      
    }
  }

  &__btn {
    padding: 10px;
    background-color: rgb(228, 100, 75);
    color: $white;
    cursor: pointer;
  }

  &__content {
    max-height: 0;
    overflow: hidden;

    background-color: rgb(74, 64, 65);
    color: $white;

    transition: 0.5s ease-in-out;

  }
}


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

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

    if (this.classList.contains("active")) {
      this.classList.remove("active")
    }
    else {
      accordion.forEach((child) => {
        child.classList.remove("active")
      })
      this.classList.add("active")
    }
  })
})
2
  • как можно сделать? 19 мар 2021 в 11:35
  • можете показать как ето сдклать? 19 мар 2021 в 11:44

2 ответа 2

0

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

Посмотрите, вот обычный аккордеон. Только CSS. Всё плавно, всё красиво, и всё очень просто.

body {min-height: 1000px;}

.accordion {
  max-width: 600px; margin: 0 auto;
  border: 1px solid cornflowerblue;
}

.accordion__heading {
  display: block; position: relative; cursor: pointer;
  padding: 10px 15px; margin: 0;
  background: cornflowerblue;color: white;
}

.accordion__heading:after, .accordion__heading:before {
  content: ""; position: absolute;
  width: 12px; height: 3px;
  top: 50%; right: 20px;
  background: white;
  transition: all 0.1s;
}

.accordion__checkbox:checked~.accordion__heading:before {
  transform: rotate(90deg);
  opacity: 0;
  transition: all 0.1s;
}

.accordion__heading:after {
  transform: rotate(90deg);
  transition: all 0.1s;
}

.accordion__checkbox:checked~.accordion__heading:after {
  transform: rotate(180deg);
}

.accordion__checkbox {
  display: none; position: absolute; left: -9999em;
}

.accordion__checkbox:checked~.accordion__content {
  max-height: 1000px;
  transition: all 2s;
}

.accordion__content {
  max-height: 0; overflow: hidden; padding: 0 15px;
  transition: all 0.5s;
}
<div class="accordion">

  <section>
    <input type="checkbox" class="accordion__checkbox" id="accordion-heading-1">
    <label class="accordion__heading" for="accordion-heading-1">Меню 1</label>
    <div class="accordion__content">
      <p>Текст 1</p>
      <p>Текст 1</p>
      <p>Текст 1</p>
    </div>
  </section>

  <section>
    <input type="checkbox" class="accordion__checkbox" id="accordion-heading-2">
    <label class="accordion__heading" for="accordion-heading-2">Меню 2</label>
    <div class="accordion__content">
      <p>Текст 2</p>
      <p>Текст 2</p>
      <p>Текст 2</p>
    </div>
  </section>

  <section>
    <input type="checkbox" class="accordion__checkbox" id="accordion-heading-3">
    <label class="accordion__heading" for="accordion-heading-3">Меню 3</label>
    <div class="accordion__content">
      <p>Текст 3</p>
      <p>Текст 3</p>
      <p>Текст 3</p>
    </div>
  </section>

</div>

Однако, если вам всё-таки нужен ваш аккордеон на javascript, то пожалуйста, теперь всё плавно, и также красиво.

const btn = document.querySelectorAll(".accordion__btn");

btn.forEach(i => {
  i.addEventListener("click", function() {
    const parent = i.parentNode;

    if (parent.classList.contains("active")) {
      parent.classList.remove("active")
    } else {
      document.querySelectorAll(".accordion__item").forEach((child) => child.classList.remove("active"))
      parent.classList.add("active")
    }
  })
})
.accordion {}

.accordion__item {
  margin-bottom: 20px;
  cursor: pointer;
}

.accordion__btn {
  padding: 20px;
  border: 1px solid #000;
}

.accordion__content {
  overflow: hidden;
  padding: 0 20px;
  border: 1px solid #000;
  border-top: none;
  max-height: 0;
  transition: all 0.5s;
}

.active .accordion__content {
  max-height: 1000px;
  transition: all 2s;
}
<div class="accordion">
  <div class="accordion__item">
    <div class="accordion__btn">trigger</div>
    <div class="accordion__content">content<br>content<br>content</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__btn">trigger</div>
    <div class="accordion__content">content<br>content<br>content</div>
  </div>
</div>

9
  • переправил код, тут как можно сделать? уже голова не варит 19 мар 2021 в 16:48
  • Не понятно то если я задам свою висоту в класе active например 200px , оно будет работать, но если в одной вкладке контента больше чем 200px , нужно чтоб висота вкладки акордеона била висотой как у контента 19 мар 2021 в 17:23
  • Я понял, я переделал код немного, но мне нужно чтоб задана максимальная высота не била 1000px а именно сколько коньентп такая и высота. 19 мар 2021 в 20:51
  • А, уже вижу, спасибо, провтикал. 20 мар 2021 в 7:59
  • анимация дерганая, как будто когда нажимаю на другой тригер оно идет ети 1000px и тогда только закривает, когда другой тригер уже открит, как исправить?чтоб плавно откривался тригер а другой плавно с ним закривался? 20 мар 2021 в 10:55
0

Если использовать jQuery, то можно сделать легко и изящно, применив slideToggle. Принцип его работы основан на переключении с display: none на display: block и плавном изменении высоты элемента. Наверное, если заморочиться, можно самостоятельно переписать это на чистом js.

$('.accordion__btn').click(function(){
    $(this).next('.accordion__content').slideToggle();
})
.accordion__btn {
  cursor: pointer;
  border: 1px solid gray;
  padding: 5px;
  margin-top: 5px;
}
.accordion__content {
  padding: 5px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
 <div class="accordion__item">
   <div class="accordion__btn">trigger</div>
   <div class="accordion__content">content</div>
 </div>
 <div class="accordion__item">
  <div class="accordion__btn">trigger</div>
  <div class="accordion__content">content</div>
 </div>
</div>

p.s. а изменение прозрачности - это я с табами перепутал, для аккордеона, конечно, не вариант

2
  • мне нужно на чистом, уже все попробовал что знал 19 мар 2021 в 12:11
  • так он работает 19 мар 2021 в 12:17

Ваш ответ

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

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