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 you have read our privacy policy.

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