JavaScript Accordion is a great way to simplify the way you display large amounts of data on your website. When the user clicks on the topic name They can easily show or hide content. This helps keep the page cleaner and more accessible. This method works well for FAQs. Product details or tutorial You want to focus on the most relevant sections without overwhelming your visitors. Additionally, displaying sections at a time helps users focus on specific content more efficiently. This greatly improves the overall user experience. Moreover, this not only increases usability, But it also contributes to a more cohesive design. Finally, with this tool, You can improve the performance and overall look of your website. Make it more efficient and user-friendly for your visitors.
Key Features Of Javascript Accordion
- Toggle Open and Close: Toggles on or off based on whether accordion content is already visible or not. Other accordion equipment All will be closed in the opening.
- Smooth Transition: Elevation transitions are adjusted smoothly using the CSS transition property.
- Icon Rotation: The arrow icon will rotate 90 degrees when opening content. and will return to its original position when closed.
- Color Change: The color of the <h3> changes when content is opened and is returned when content is closed.
- Auto Height Adjustment: Content height automatically adjusts to accommodate text based on scroll height.
Explanation
- The script will loop through all accordion faces using querySelectorAll Add a click event listener to each shutter. (clickable name)
- When you click the shutter Other accordion objects All will be turned off by setting the height to 0px. Reset icon rotation. and change the text color back to default.
- For the shutter that clicks The content height will be set to scrollHeight (the content’s full height), causing the content to expand naturally. Click again, reset the height to 0px, and close.
Resources Of Javascript Accordion
- Technology: HTML5, CSS3, Javascript
- External Resources: Google Fonts, Remixicon
- Responsive: Yes
Related Content You Might Enjoy
- Create a Responsive Accordion with Item Count for Your Website
- Build an Accordion with ES6: Accordion Open One at a Time
Source Code & Demo
To use this project source code effectively:
- Source Code: You can obtain the complete source code by copying the code provided below.
- Download: You can download the source code by clicking the Source Code button below to get a ZIP file of the project. Extract the contents to your desired directory.
- Open the Project: Open the project folder using a text editor or an integrated development environment (IDE) like Visual Studio Code.
- Modify and Experiment: Customize the content, styles, and functionalities to suit your preferences. Experiment with different design elements and JavaScript interactions to enhance your learning.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frequently asked questions</title>
<!-- remix icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="accordion-container">
<h1>frequently asked questions</h1>
<div class="accordion-content">
<!-- face one -->
<div class="accordion-content-face">
<div class="shutter">
<h3>how to register free event?</h3>
<i class="ri-arrow-right-s-line"></i>
</div>
<p class="face-content">
Phosfluorescently reintermediate multimedia based content rather
than excellent processes. Collaboratively synergize future-proof
bandwidth rather than 24/7 web services. Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto et eos eum ad adipisci quisquam possimus placeat rem. Exercitationem quam labore hic sunt tempore suscipit rem a odio eum quaerat?
</p>
</div>
<!-- face two -->
<div class="accordion-content-face">
<div class="shutter">
<h3>how to make extra fields in register form?</h3>
<i class="ri-arrow-right-s-line"></i>
</div>
<p class="face-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil non magnam modi pariatur odio minus cumque inventore consequatur optio laboriosam, earum corrupti, sunt autem sit rerum quidem at voluptatum sed. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis reprehenderit et, modi delectus facere quos minus at quisquam, fugiat culpa molestiae error consequatur numquam totam architecto, amet earum nihil officia. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est inventore recusandae quisquam doloribus vel? Ipsa et quos, sapiente assumenda iste necessitatibus itaque temporibus vitae incidunt porro consequuntur. Consequuntur, quae quod.
</p>
</div>
<!-- face three -->
<div class="accordion-content-face">
<div class="shutter">
<h3>how to export registration to csv file?</h3>
<i class="ri-arrow-right-s-line"></i>
</div>
<p class="face-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellat nemo, hic nulla aperiam quae quasi tempora officiis doloribus dolore eius reiciendis ab animi, facilis vero accusamus exercitationem magni at incidunt odit dolor expedita numquam molestias. Quis, excepturi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, natus sunt! Ipsam maxime accusamus, libero hic nihil doloremque eligendi aliquid, officia quos minus fugiat animi culpa ullam dolorem nulla! Officiis?
</p>
</div>
<!-- face four -->
<div class="accordion-content-face">
<div class="shutter">
<h3>how can purchase the best theme?</h3>
<i class="ri-arrow-right-s-line"></i>
</div>
<p class="face-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellat nemo, hic nulla aperiam quae quasi tempora officiis doloribus dolore eius reiciendis ab animi, facilis vero accusamus exercitationem magni at incidunt odit dolor expedita numquam molestias. Quis, excepturi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, natus sunt! Ipsam maxime accusamus, libero hic nihil doloremque eligendi aliquid, officia quos minus fugiat animi culpa ullam dolorem nulla! Officiis?
</p>
</div>
<!-- face five -->
<div class="accordion-content-face">
<div class="shutter">
<h3>what is the refund privacy policy?</h3>
<i class="ri-arrow-right-s-line"></i>
</div>
<p class="face-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellat nemo, hic nulla aperiam quae quasi tempora officiis doloribus dolore eius reiciendis ab animi, facilis vero accusamus exercitationem magni at incidunt odit dolor expedita numquam molestias. Quis, excepturi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, natus sunt! Ipsam maxime accusamus, libero hic nihil doloremque eligendi aliquid, officia quos minus fugiat animi culpa ullam dolorem nulla! Officiis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum eum placeat optio, et nisi tempore impedit cum atque tempora dignissimos, autem quam minus esse, provident inventore animi. Sed, tenetur vel.
</p>
</div>
</div>
</section>
<!-- js file -->
<script src="script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: 5px;
}
html::-webkit-scrollbar-thumb {
background-color: inherit;
}
body {
font-family: "Inter", sans-serif;
position: relative;
min-height: 100vh;
background-color: #222222;
display: flex;
justify-content: center;
padding-block: 80px 50px;
color: #f1f5f9;
}
.accordion-container {
width: max(300px, 95%);
margin: 0 auto;
background-color: inherit;
}
.accordion-container h1 {
text-align: center;
margin-block-end: 2.5rem;
text-transform: capitalize;
font-weight: 900;
letter-spacing: 1px;
font-size: calc(20px + 1.2vw);
}
.accordion-content-face {
padding: 1rem 1.5rem;
border-bottom: 1px solid #f1f5f9;
}
.shutter {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 1rem 0;
}
.shutter h3 {
text-transform: capitalize;
font-size: calc(1rem + 0.5vw);
font-weight: 600;
}
.shutter i {
font-size: 1.8rem;
}
.face-content {
height: 0;
overflow: hidden;
font-size: calc(1rem + 0.2vw);
font-weight: 200;
text-align: justify;
transition: all 400ms ease-in-out;
}
/* media query */
@media (min-width: 640px) {
.accordion-container {
width: 85%;
}
}
@media (min-width: 767px) {
.accordion-container {
width: 75%;
}
}
@media (min-width: 992px) {
.accordion-container {
width: 65%;
}
}
@media (min-width: 1024px) {
.accordion-container {
width: 60%;
}
}
@media (min-width: 1234px) {
.accordion-container {
width: 50%;
}
}
document.querySelectorAll(".accordion-content-face").forEach((face) => {
const shutter = face.querySelector(".shutter");
const content = face.querySelector(".face-content");
const icon = face.querySelector("i");
const heading = face.querySelector("h3");
shutter.addEventListener("click", () => {
// Close all open accordion items
document.querySelectorAll(".face-content").forEach((openContent) => {
if (openContent !== content) {
openContent.style.height = "0";
openContent.previousElementSibling.querySelector("i").style.transform =
"rotate(0deg)";
openContent.previousElementSibling.querySelector("i").style.color =
"#f1f5f9";
openContent.previousElementSibling.querySelector("h3").style.color =
"#f1f5f9";
}
});
// Toggle the clicked accordion item
if (content.style.height === "0px" || !content.style.height) {
const contentHeight = content.scrollHeight + "px";
content.style.height = contentHeight;
icon.style.transform = "rotate(90deg)";
icon.style.color = "#86efac";
icon.style.transition = "transform 400ms";
heading.style.color = "#86efac";
} else {
content.style.height = "0";
icon.style.transform = "rotate(0deg)";
heading.style.color = "#f1f5f9";
icon.style.color = "#f1f5f9";
}
});
});
Code & Preview
You can download the source code files for free by clicking the Source Code button. Additionally, you can edit and view a live demo by clicking the Code & Preview button below.
