<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")
}
})
})
-
как можно сделать?– Dart VinnieCommented 19 мар. 2021 в 11:35
-
можете показать как ето сдклать?– Dart VinnieCommented 19 мар. 2021 в 11:44
Добавить комментарий
|
2 ответа
А вам действительно нужны скрипты только для того, чтобы сделать плавное появление?
Посмотрите, вот обычный аккордеон. Только 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>
-
переправил код, тут как можно сделать? уже голова не варит Commented 19 мар. 2021 в 16:48
-
Не понятно то если я задам свою висоту в класе active например 200px , оно будет работать, но если в одной вкладке контента больше чем 200px , нужно чтоб висота вкладки акордеона била висотой как у контента Commented 19 мар. 2021 в 17:23
-
Я понял, я переделал код немного, но мне нужно чтоб задана максимальная высота не била 1000px а именно сколько коньентп такая и высота. Commented 19 мар. 2021 в 20:51
-
-
анимация дерганая, как будто когда нажимаю на другой тригер оно идет ети 1000px и тогда только закривает, когда другой тригер уже открит, как исправить?чтоб плавно откривался тригер а другой плавно с ним закривался? Commented 20 мар. 2021 в 10:55
Если использовать 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. а изменение прозрачности - это я с табами перепутал, для аккордеона, конечно, не вариант