Managing dynamic content on a web page can become overwhelming, especially when users need to navigate through large sections of text. This accordion system eliminates all common issues by offering a clean, pure JavaScript and CSS-ready solution. It allows users to create as many accordions as needed, each with distinct configurations, all while maintaining accessibility and a polished design.
At its core, this accordion system focuses on usability and flexibility. Once the JavaScript and CSS Styles are included, developers or content creators can configure accordions by defining simple HTML attributes. Whether you need a basic layout or advanced configurations, the system adapts to your needs while maintaining accessibility and a smooth user experience.
Configurable states
All customization happens through HTML attributes. The system automatically handles dynamic states like expansion, collapse, and focus management. The data-default attribute allows users to set the initial state of the accordion:
- all-collapsed (default): Every item starts closed.
- all-expanded: All items are open.
- first: Only the first item is expanded.
Icon flexibility
Choose between two icon styles, caret or plus-minus, via the data-icon attribute. Icons automatically adjust based on the state of each accordion item.
Examples
Here’s how this system works in real-world scenarios, demonstrating multiple accordions with different configurations on the same page:
Example 1: Accordion with caret icons, all items collapsed
You can return items within 30 days of purchase with a valid receipt. The item must be in its original condition and packaging.
Full refunds are available for returns within the 30-day window. Items should be unused, and you can return them via mail or at any of our store locations.
Tracking your order is simple and convenient. Log in to your account and visit the "Order History" section. Find your order and click the "Track Order" button to view the real-time status of your shipment, including the estimated delivery date.
Yes, we ship internationally to select countries. Check our shipping policy for the list of supported countries. Buyers are responsible for any applicable customs duties and taxes. International shipments typically take 7-21 business days to arrive.
You can modify or cancel your order within 24 hours of placing it. After this window, changes may not be possible. To update the shipping address or item quantity, contact our support team. Refunds for canceled orders are processed within 5-7 business days.
<div class="accordion" data-icon="caret">
<!-- Accordion Item 1 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">What is your return policy?</button>
</h3>
<div class="accordion-content">
<p>You can return items within 30 days of purchase with a valid receipt. The item must be in its original condition and packaging.</p>
<p>Full refunds are available for returns within the 30-day window. Items should be unused, and you can return them via mail or at any of our store locations.</p>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">How can I track my order?</button>
</h3>
<div class="accordion-content">
<p>Tracking your order is simple and convenient. Log in to your account and visit the "Order History" section. Find your order and click the "Track Order" button to view the real-time status of your shipment, including the estimated delivery date.</p>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">Do you offer international shipping?</button>
</h3>
<div class="accordion-content">
<p>Yes, we ship internationally to select countries. Check our shipping policy for the list of supported countries. Buyers are responsible for any applicable customs duties and taxes. International shipments typically take 7-21 business days to arrive.</p>
</div>
</div>
<!-- Accordion Item 4 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">Can I cancel or modify my order?</button>
</h3>
<div class="accordion-content">
<p>You can modify or cancel your order within 24 hours of placing it. After this window, changes may not be possible. To update the shipping address or item quantity, contact our support team. Refunds for canceled orders are processed within 5-7 business days.</p>
</div>
</div>
</div>
Example 2: Accordion with plus-minus icons, first item open
This chapter covers the basics of web development, including an overview of HTML, CSS, and JavaScript. You'll learn how these technologies work together to create modern websites.
In this chapter, we dive into the building blocks of HTML, including tags, elements, attributes, and how to structure a simple webpage.
Learn how to style your HTML elements using CSS. Topics include selectors, properties, and creating responsive designs for different devices.
<div class="accordion" data-icon="plus-minus" data-default="first">
<!-- Accordion Item 1 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">Chapter 1: Introduction to Web Development</button>
</h3>
<div class="accordion-content">
<p>This chapter covers the basics of web development, including an overview of HTML, CSS, and JavaScript. You'll learn how these technologies work together to create modern websites.</p>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">Chapter 2: Understanding HTML Structure</button>
</h3>
<div class="accordion-content">
<p>In this chapter, we dive into the building blocks of HTML, including tags, elements, attributes, and how to structure a simple webpage.</p>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">Chapter 3: Styling with CSS</button>
</h3>
<div class="accordion-content">
<p>Learn how to style your HTML elements using CSS. Topics include selectors, properties, and creating responsive designs for different devices.</p>
</div>
</div>
</div>
Example 3: Accordion with caret icons, all items open
In this step, gather all the necessary requirements from stakeholders. Understand the project goals, target audience, and key features needed for success.
Develop wireframes to outline the basic structure and flow of the application. Follow up with detailed mockups to visualize the final design before development begins.
Build the application using the chosen technology stack. Conduct thorough testing to ensure functionality, usability, and performance meet the project requirements.
<div class="accordion" data-icon="caret" data-default="all-expanded">
<!-- Accordion Item 1 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">Step 1: Gather project requirements</button>
</h3>
<div class="accordion-content">
<p>In this step, gather all the necessary requirements from stakeholders. Understand the project goals, target audience, and key features needed for success.</p>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">Step 2: Create wireframes and mockups</button>
</h3>
<div class="accordion-content">
<p>Develop wireframes to outline the basic structure and flow of the application. Follow up with detailed mockups to visualize the final design before development begins.</p>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button">Step 3: Develop and test the application</button>
</h3>
<div class="accordion-content">
<p>Build the application using the chosen technology stack. Conduct thorough testing to ensure functionality, usability, and performance meet the project requirements.</p>
</div>
</div>
</div>
That’s it! No additional coding is required. Simply modify the HTML attributes to adjust behavior and appearance.
Accessibility and performance
Accessibility is built in. The system includes proper ARIA roles and attributes to ensure compatibility with screen readers. It also supports keyboard navigation, allowing users to interact using the Enter and Space keys. Smooth height transitions ensure a polished experience, even for dynamically loaded content.
Customization options
The accordion system is designed to be flexible. Dynamic callbacks: Trigger specific actions when an accordion item is expanded or collapsed. Styling: Fully customizable with SCSS variables, allowing seamless integration into existing designs.
See it in action
Explore the live demo on CodePen to see it in action and start integrating it into your projects. Before you leave, don’t forget to drop some claps to show your support!