<div class="fqa">
<div class="fqa__container">
<div class="fqa__wrapper">
<div class="fqa__subtitle">
<h2>Integrated Healthcare Approach</h2>
</div>
<div id="accordion" class="accordion fqa__accordion">
<div class="accordion__item fqa__item">
<div class="accordion__header fqa__header">
What sets Nosis Health apart in healthcare services?
</div>
<div class="accordion__body fqa__body">
<div class="accordion__content fqa__content">
Nosis Health stands out by connecting patients with unconventional healthcare
providers who adopt an integrated, systems approach to health. We go beyond the
mainstream medical model.
</div>
</div>
</div>
</div>
</div>
<div class="fqa__wrapper">
<div class="fqa__subtitle">
<h2>Discovering Nosis Providers</h2>
</div>
<div id="accordion" class="accordion fqa__accordion">
<div class="accordion__item fqa__item">
<div class="accordion__header fqa__header">
How do I find a suitable healthcare provider on Nosis?
</div>
<div class="accordion__body fqa__body">
<div class="accordion__content fqa__content">
Nosis Health stands out by connecting patients with unconventional healthcare
providers who adopt an integrated, systems approach to health. We go beyond the
mainstream medical model.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
class ItcAccordion {
constructor(target, config) {
this._el = typeof target === 'string' ? document.querySelectora(target) : target;
const defaultConfig = {
alwaysOpen: true,
duration: 350
};
this._config = Object.assign(defaultConfig, config);
this.addEventListener();
}
addEventListener() {
this._el.addEventListener('click', (e) => {
const elHeader = e.target.closest('.accordion__header');
if (!elHeader) {
return;
}
if (!this._config.alwaysOpen) {
const elOpenItem = this._el.querySelector('.accordion__item_show');
if (elOpenItem) {
elOpenItem !== elHeader.parentElement ? this.toggle(elOpenItem) : null;
}
}
this.toggle(elHeader.parentElement);
});
}
show(el) {
const elBody = el.querySelector('.accordion__body');
if (elBody.classList.contains('collapsing') || el.classList.contains('accordion__item_show')) {
return;
}
elBody.style['display'] = 'block';
const height = elBody.offsetHeight;
elBody.style['height'] = 0;
elBody.style['overflow'] = 'hidden';
elBody.style['transition'] = `height ${this._config.duration}ms ease`;
elBody.classList.add('collapsing');
el.classList.add('accordion__item_slidedown');
elBody.offsetHeight;
elBody.style['height'] = `${height}px`;
window.setTimeout(() => {
elBody.classList.remove('collapsing');
el.classList.remove('accordion__item_slidedown');
elBody.classList.add('collapse');
el.classList.add('accordion__item_show');
elBody.style['display'] = '';
elBody.style['height'] = '';
elBody.style['transition'] = '';
elBody.style['overflow'] = '';
}, this._config.duration);
}
hide(el) {
const elBody = el.querySelector('.accordion__body');
if (elBody.classList.contains('collapsing') || !el.classList.contains('accordion__item_show')) {
return;
}
elBody.style['height'] = `${elBody.offsetHeight}px`;
elBody.offsetHeight;
elBody.style['display'] = 'block';
elBody.style['height'] = 0;
elBody.style['overflow'] = 'hidden';
elBody.style['transition'] = `height ${this._config.duration}ms ease`;
elBody.classList.remove('collapse');
el.classList.remove('accordion__item_show');
elBody.classList.add('collapsing');
window.setTimeout(() => {
elBody.classList.remove('collapsing');
elBody.classList.add('collapse');
elBody.style['display'] = '';
elBody.style['height'] = '';
elBody.style['transition'] = '';
elBody.style['overflow'] = '';
}, this._config.duration);
}
toggle(el) {
el.classList.contains('accordion__item_show') ? this.hide(el) : this.show(el);
}
};
Как я могу подружить два или больше аккордиона, что не так?
