Cdn is provided by raw.githack.com
Simplify Accordion reduces vertical space with large amounts of information.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat animi eligendi neque aliquid officia nulla. Aliquid tempore vel iusto doloribus in fuga consequuntur culpa, maiores dicta, esse odit. Praesentium, sapiente.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat animi eligendi neque aliquid officia nulla. Aliquid tempore vel iusto doloribus in fuga consequuntur culpa, maiores dicta, esse odit. Praesentium, sapiente.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat animi eligendi neque aliquid officia nulla. Aliquid tempore vel iusto doloribus in fuga consequuntur culpa, maiores dicta, esse odit. Praesentium, sapiente.
<div class="s-accordin">
<div class="s-accord-item ">
<div class="s-accord-title">
<div class="title">Title</div>
<div class="s-icon"><span class="mdi mdi-chevron-down"></span></div>
</div>
<div class="s-accord-content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat animi eligendi neque
aliquid officia nulla. Aliquid tempore vel iusto
doloribus in fuga consequuntur culpa, maiores dicta, esse odit. Praesentium, sapiente.
</p>
</div>
</div>
<div class="s-accord-item">
<div class="s-accord-title">
<div class="title">Title</div>
<div class="tele">amg looj</div>
<div class="s-icon"><span class="icon mdi mdi-chevron-down"></span></div>
</div>
<div class="s-accord-content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat animi eligendi neque
aliquid officia nulla. Aliquid tempore vel iusto
doloribus in fuga consequuntur culpa, maiores dicta, esse odit. Praesentium, sapiente.
</p>
</div>
</div>
<div class="s-accord-item">
<div class="s-accord-title">
<div class="title">Title</div>
<div class="s-icon"><span class="mdi mdi-chevron-down "></span></div>
</div>
<div class="s-accord-content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat animi eligendi neque
aliquid officia nulla. Aliquid tempore vel iusto
doloribus in fuga consequuntur culpa, maiores dicta, esse odit. Praesentium, sapiente.
</p>
</div>
</div>
</div>
const accordingContainer = document.querySelectorAll('.s-accordin')
accordingContainer.forEach(element => {
element.addEventListener('click', e => {
let target = e.target;
let targetChildren = target.children
if (target.classList.contains('s-accord-title')) {
const accordContent = target.nextElementSibling;
const elHeight = target.nextElementSibling.clientHeight;
let i = 1;
if (elHeight < ; = 0) {
try {
for (i in target.children) {
if (targetChildren[i].classList.contains('s-icon')) {
targetChildren[i].style.cssText = "transform: rotate(180deg); transition:all .2s linear"
}
}
} catch (error) {
}
slideDown(accordContent);
} else if (elHeight >= 0) {
try {
for (i in target.children) {
if (targetChildren[i].classList.contains('s-icon')) {
targetChildren[i].style.cssText = "transform: rotate(360deg);transition:all .2s linear"
}
}
} catch (error) {
}
slideUp(accordContent);
}
} else {
try {
target.closest('.s-accord-title').click();
} catch (error) {
}
}
})
})
function slideUp(elem) {
//elem.style.transition = "all 4s ease-in-out";
elem.style.cssText = "display:none; opacity:0";
}
function slideDown(elem) {
elem.style.cssText = "display:block; opacity:1";
}