<main>
<h1>Frequent Accordion Questions</h1>
<section id="accordion" class="accordion">
<div class="accordion-container">
<div class="accordion-item">
<button class="accordion-trigger" id="accordion-trigger-1" aria-expanded="false" aria-controls="accordion-content-1">
<span class="accordion-title">
How does an accordion work?
</span>
<span class="accordion-icon">
+
</span>
</button>
<div class="accordion-content" id="accordion-content-1" role="region" aria-labelledby="accordion-trigger-1">
<p>It toggles collapsible content based on user interaction.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-trigger" id="accordion-trigger-2" aria-expanded="false" aria-controls="accordion-content-2">
<span class="accordion-title">
Why should I use an accordion?
</span>
<span class="accordion-icon">
+
</span>
</button>
<div class="accordion-content" id="accordion-content-2" role="region" aria-labelledby="accordion-trigger-3">
<p>It helps improves user exerience by providing condensed information in an easy-to-read manner.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-trigger" id="accordion-trigger-3" aria-expanded="false" aria-controls="accordion-content-3">
<span class="accordion-title">
Is an accordion a type of animal?
</span>
<span class="accordion-icon">
+
</span>
</button>
<div class="accordion-content" id="accordion-content-3" role="region" aria-labelledby="accordion-trigger-3">
<p>No, you're thinking of an armadillo.</p>
</div>
</div>
</div>
</section>
</main>
<footer>
Pen by <a href="https://www.jemimaabu.com" target="_blank" rel="noopener">Jemima Abu</a> <span class="heart">♥</span>
</footer>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Inter", sans-serif;
}
main {
min-height: 100vh;
}
h1 {
text-align: center;
margin-top: 72px;
margin-bottom: 48px;
}
.accordion {
margin-bottom: 24px;
}
.accordion-container {
width: 90%;
max-width: 1240px;
margin: 0 auto;
border: 3px solid #e0e0e0;
border-radius: 24px;
overflow: hidden;
}
.accordion-item {
width: 100%;
}
.accordion-trigger {
width: 100%;
display: block;
background-color: rgb(250, 250, 250);
color: rgb(0, 0, 0);
padding: 24px;
font-size: 20px;
font-weight: 500;
font-family: 'Inter', sans-serif;
text-align: left;
border: none;
display: flex;
gap: 16px;
justify-content: space-between;
cursor: pointer;
}
.accordion-icon {
transition: transform 0.5s;
}
.accordion-item.is-active .accordion-icon {
transform: rotate(45deg);
}
.accordion-item:not(:first-of-type) .accordion-trigger {
border-top: 3px solid #eaeaea;
}
.accordion-content {
height: 0;
overflow: hidden;
transition: 0.5s;
}
.accordion-content p {
margin: 24px;
}
footer {
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
background-color: #ffdfb9;
}
footer a {
color: inherit;
text-decoration: none;
}
footer .heart {
color: #dc143c;
}
const accordionItems = document.querySelectorAll(".accordion-item");
const toggleAccordion = (index) => {
resetAccordions(index);
const currentAccordion = accordionItems[index];
currentAccordion.classList.toggle("is-active");
const accordionContent = currentAccordion.querySelector(".accordion-content");
const accordionTrigger = currentAccordion.querySelector(".accordion-trigger");
if (currentAccordion.classList.contains("is-active")) {
accordionContent.style.height = `${accordionContent.scrollHeight}px`;
accordionTrigger.setAttribute("aria-expanded", "true");
} else {
accordionContent.style.height = 0;
accordionTrigger.setAttribute("aria-expanded", "false");
}
};
const resetAccordions = (targetIndex) => {
accordionItems.forEach((accordion, index) => {
const accordionContent = accordion.querySelector(".accordion-content");
const accordionTrigger = accordion.querySelector(".accordion-trigger");
if (targetIndex != index) {
accordion.classList.remove("is-active");
accordionContent.style.height = 0;
accordionTrigger.setAttribute("aria-expanded", "false");
}
});
};
window.addEventListener("load", () => {
accordionItems.forEach((accordion, index) => {
const accordionTrigger = accordion.querySelector(".accordion-trigger");
accordionTrigger.addEventListener("click", () => toggleAccordion(index));
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.