Want to bring an organized and user-friendly experience to your web content? Accordion with counting is the perfect solution! This accordion layout is interactive, responsive, and engaging, allowing users to explore categorized content without overwhelming them. Each category shows how many items it contains. Give users a quick overview to reduce clutter on the page. And with stylish animations and switching icons, This accordion doesn’t just look good. But it’s also incredibly practical.
Key Features Of Accordion with Item Count
- Dynamic Item Count: Each accordion name displays the number of items in the content. It updates automatically every time an item is added or removed.
- Toggle Animation: Smooth transition effects enhance opening and closing. Improved visual fluidity and interaction.
- Icon Toggle: A plus (+) icon indicates a collapsed section, while a minus (-) icon appears when a section is open.
- Custom Styling: The plus sign (+) indicates a collapsed section. while a minus sign (-) appears when the section is open.
- Single Open Section: Modern and responsive design with media commands ensures compatibility with different screen sizes. This makes it suitable for both mobile and desktop users.
Project Explanation Of Accordion with Item Count
This project uses HTML, CSS, and JavaScript to create a smooth, dynamic accordion component. Each section of the accordion has a clickable name that shows the number of items. It has a plus sign (+) for closed and a minus sign (-) for open. Clicking on a section will show the results within. Using smooth transitions to turn on and off. Other open parts Some parts will collapse neatly on their own… The code is lightweight, responsive, and ready to adapt to different screen sizes. This makes it a flexible option for both mobile and desktop configurations…
Related Content You Might Enjoy
- How to Build a Custom Accordion Menu with Tailwind CSS
- Simple JavaScript Accordion Only One Section Open at a Time
- Build an Accordion with ES6: Accordion Open One at a Time
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>accordion with item count</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<h3 onclick="toggleSection(this)">
<span>front-end technology (<span class="count"></span>)</span>
<span class="toggle-icon">+</span>
</h3>
<div class="content">
<p>HTML5</p>
<p>CSS3</p>
<p>javascript</p>
<p>bootstrap</p>
<p>tailwindcss</p>
<p>reactjs</p>
</div>
</div>
<div class="accordion-item">
<h3 onclick="toggleSection(this)">
<span>backend technology (<span class="count"></span>)</span>
<span class="toggle-icon">+</span>
</h3>
<div class="content">
<p>nodejs</p>
<p>expressjs</p>
<p>mongodb</p>
<p>mongoose</p>
<p>mvc pattern</p>
</div>
</div>
<div class="accordion-item">
<h3 onclick="toggleSection(this)">
<span>popular css framework (<span class="count"></span>)</span>
<span class="toggle-icon">+</span>
</h3>
<div class="content">
<p>bootstrap5</p>
<p>uikit</p>
<p>material ui</p>
<p>foundation</p>
<p>bulma</p>
</div>
</div>
<div class="accordion-item">
<h3 onclick="toggleSection(this)">
<span>fornt-end library (<span class="count"></span>)</span>
<span class="toggle-icon">+</span>
</h3>
<div class="content">
<p>reactjs</p>
<p>nextjs</p>
<p>angular</p>
<p>vuejs</p>
<p>svelte</p>
<p>refine</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300..900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
position: relative;
font-family: "Rubik", sans-serif;
display: flex;
justify-content: center;
align-items: center;
background: url("https://i.postimg.cc/tRnkWMwY/nature-7175030-1280.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.accordion {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.accordion-item {
width: 100%;
padding-inline: 2rem;
margin-inline: auto;
}
/* Basic Accordion Styling */
.accordion-item h3 {
cursor: pointer;
color: #fafafa;
padding: 15px 5px;
margin: 0;
border-bottom: 1px solid rgba(225, 225, 225, .4);
transition: color 0.3s ease;
font-size: calc(1.2rem + 0.5vw);
text-transform: capitalize;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Color when section is open */
.accordion-item h3:hover,
.accordion-item h3.open {
color: #a3e635;
border-color: rgba(163, 230, 53, .4);
}
/* Content Styling with Smooth Transition */
.content {
max-height: 0;
overflow: hidden;
transition: all 0.5s ease;
margin-top: 0;
padding: 0 15px;
}
.content.open {
margin-top: 1rem;
background-color: rgba(163, 230, 53, .1);
}
.content p {
margin: 5px 0;
color: #fafafa;
font-size: calc(1rem + 0.5vw);
text-transform: capitalize;
}
/* Toggle Icon Styling */
.toggle-icon {
font-weight: bold;
font-size: 1.3rem;
transition: transform 0.3s ease, opacity 0.3s ease;
display: inline-block;
}
.open .toggle-icon {
opacity: 0.8;
}
/* media query for responsiveness */
@media (min-width: 640px) {
.accordion-item {
width: 90%;
padding-inline: 2rem;
}
}
@media (min-width: 767px) {
.accordion-item {
width: 80%;
padding-inline: 2rem;
}
}
@media (min-width: 992px) {
.accordion-item {
width: 70%;
padding-inline: 2rem;
}
}
@media (min-width: 1024px) {
.accordion-item {
width: 55%;
padding-inline: 2rem;
}
}
@media (min-width: 1234px) {
.accordion-item {
width: 45%;
padding-inline: 2rem;
}
}
// Toggle accordion section with dynamic max-height
function toggleSection(header) {
const currentContent = header.nextElementSibling;
const allContents = document.querySelectorAll(".content");
const allHeaders = document.querySelectorAll(".accordion-item h3");
// Close all other sections except the current one
allContents.forEach((content) => {
if (content !== currentContent) {
content.style.maxHeight = null;
content.classList.remove("open");
content.previousElementSibling.classList.remove("open");
}
});
// Toggle the current section
currentContent.classList.toggle("open");
header.classList.toggle("open");
// Set max-height based on scrollHeight for smooth expansion
if (currentContent.classList.contains("open")) {
currentContent.style.maxHeight = currentContent.scrollHeight + "px";
} else {
currentContent.style.maxHeight = null;
}
// Update icons
updateIcons();
}
// Update the toggle icons based on content state
function updateIcons() {
const headers = document.querySelectorAll(".accordion-item h3");
headers.forEach((header) => {
const icon = header.querySelector(".toggle-icon");
icon.textContent = header.classList.contains("open") ? "-" : "+";
});
}
// Update item counts in each section
function updateItemCounts() {
const accordionItems = document.querySelectorAll(".accordion-item");
accordionItems.forEach((item) => {
const content = item.querySelector(".content");
const countSpan = item.querySelector(".count");
const itemCount = content.querySelectorAll("p").length;
countSpan.textContent = itemCount;
});
}
// Run functions on page load
document.addEventListener("DOMContentLoaded", () => {
updateItemCounts();
updateIcons();
});
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 Edit With Codepen button below.
