Let's create a Facts Accordion using HTML, CSS and Vanilla Javascript
Firstly we will create an HTML skeleton of the accordion. There will be 4 Facts card. So the HTML will look like the below :
<div class="container">
<h2 class="accordion-title">Facts About Mars!</h2>
<div class="faq-container grid">
<div class="faq-item">
<header class="faq-header">
<i class="ri-add-line"></i>
<h4 class="faq-header-title">Also known as the Red Planet</h4>
</header>
<div class="faq-desp">
<p class="faq-desp-content">
This is because Mars is covered in soil, rock, and dust made from
iron oxide which gives the surface a red rusty colour
</p>
</div>
</div>
</div>
</div>
There will be 3 more facts card [div with a class of faq-item] inside the [div with a class of faq-container]. We will use CSS grid to structure the facts cards:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
Our goal is to show/hide the Facts card description [div tag with a class of faq-desp] by clicking on the card header [header tag with a class of faq-header]
Firstly we will hide the Facts card description using the CSS property height: 0px and overflow: hidden like below:
.faq-desp {
overflow: hidden;
height: 0px;
}
Now the exciting part is to toggle (show/hide) the description using Javascript. Code snippet below:
const faqItems = document.querySelectorAll(".faq-item");
faqItems.forEach((faq) => {
const faqHeader = faq.querySelector(".faq-header");
faqHeader.addEventListener("click", () => {
const openFaq = document.querySelector(".faq-open");
toogleFaq(faq);
if (openFaq && openFaq !== faq) {
toogleFaq(openFaq);
}
});
});
const toogleFaq = (faq) => {
const faqDescription = faq.querySelector(".faq-desp");
if (faq.classList.contains("faq-open")) {
faqDescription.removeAttribute("style");
faq.classList.remove("faq-open");
} else {
faqDescription.style.height = faqDescription.scrollHeight + "px";
faq.classList.add("faq-open");
}
};
Steps to achieve the goal:
- Select all Facts cards using querySelectorAll
- Loop over each card using forEach and select the card header
- Add a click event listener on the header and call the toggle function (it shows/hide the fact card description) with the card as an argument in the callback function of the event listener
- The toggle function selects the card description and adds an inline style of height which is equal to the scrollHeight. [The scrollHeight property returns the height of an element including padding, but excluding borders, scrollbars, or margins]
- We have achieved our goal. Rest I have added additional styles to make the accordion look presentable
Please find the complete code in the codesandbox here: Code Sandbox
Top comments (0)