Анимация аккордеонов с помощью WAAPI ⇐ Javascript

[Anonymous]

Я использую тег HTML для создания аккордеона с несколькими вкладками. Я также использую Javascript с API веб-анимации (WAAPI) для анимации высоты открытия/закрытия каждой вкладки.
Проблема в том, что я не могу найти правильный способ закрытия открытой активной вкладки при открытии новой. Сейчас, когда вы открываете новую вкладку, предыдущая по-прежнему остается открытой.

Код: Выделить всё

class Accordion {
constructor(el) {
this.el = el;
this.summary = el.querySelector('summary');
this.content = el.querySelector('.content');

this.animation = null;
this.isClosing = false;
this.isExpanding = false;
this.summary.addEventListener('click', (e) => this.onClick(e));
}

onClick(e) {
e.preventDefault();
this.el.style.overflow = 'hidden';
if (this.isClosing || !this.el.open) {
this.open();
} else if (this.isExpanding || this.el.open) {
this.shrink();
}
}

shrink() {
this.isClosing = true;

const startHeight = `${this.el.offsetHeight}px`;
const endHeight = `${this.summary.offsetHeight}px`;

if (this.animation) {
this.animation.cancel();
}

this.animation = this.el.animate({
height: [startHeight, endHeight]
}, {
duration: 400,
easing: 'ease-out'
});

this.animation.onfinish = () =>   this.onAnimationFinish(false);
this.animation.oncancel = () => this.isClosing = false;
}

open() {
this.el.style.height = `${this.el.offsetHeight}px`;
this.el.open = true;
window.requestAnimationFrame(() => this.expand());
}

expand() {
this.isExpanding = true;
const startHeight = `${this.el.offsetHeight}px`;
const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;

if (this.animation) {
this.animation.cancel();
}

this.animation = this.el.animate({
height: [startHeight, endHeight]
}, {
duration: 400,
easing: 'ease-out'
});
this.animation.onfinish = () => this.onAnimationFinish(true);
this.animation.oncancel = () => this.isExpanding = false;
}

onAnimationFinish(open) {
this.el.open = open;
this.animation = null;
this.isClosing = false;
this.isExpanding = false;
this.el.style.height = this.el.style.overflow = '';
}
}

document.querySelectorAll('details').forEach((el) => {
new Accordion(el);
});

Код: Выделить всё

summary {
border: 4px solid transparent;
outline: none;
&:focus {
border-color: black;
}
padding: 1rem;
display: block;
background: #444;
color: white;
padding-left: 2.2rem;
position: relative;
cursor: pointer;
}
details {
max-width: 500px;
box-sizing: border-box;
margin-top: 5px;
background: white;
}
details summary::-webkit-details-marker {
display:none;
}
details[open] > summary:before {
transform: rotate(90deg);
}
summary:before {
content: '';
border-width: .4rem;
border-style: solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 1.3rem;
left: 1rem;
transform: rotate(0);
transform-origin: .2rem 50%;
transition: .25s transform ease;
}
.content {
border-top: none;
padding: 10px;
border: 2px solid #888;
border-top: none;
}
p {
margin: 0;
padding-bottom: 10px;
&:last-child {
padding: 0;
}
}
img {
max-width: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
}

Код: Выделить всё

Tab 1


Lorem, ipsum dolor sit amet consectetur adipisicing elit.  Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!

Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.



Tab 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!

Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.



Tab 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!

Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.

Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/798 ... with-waapi