DEV Community

joachim kliemann
joachim kliemann

Posted on

Creating an Accordion with JavaScript Classes: A Real-World Example

As a frontend developer, you’re likely familiar with the myriad of ways JavaScript can enhance user experience on a website. One common component that can benefit from JavaScript’s capabilities is the accordion. In this article, we’ll delve into creating an accordion using JavaScript classes, focusing on ensuring only one item is open at a time while the rest remain closed. This approach not only streamlines the user experience but also showcases the power and organization offered by JavaScript classes.

Understanding JavaScript Classes

Before we dive into the accordion, let's briefly touch on JavaScript classes. Introduced in ECMAScript 2015, classes in JavaScript are a syntactical sugar over the existing prototype-based inheritance and provide a much cleaner and more modular way to create objects and handle inheritance.

Building the Accordion

HTML Structure

Start with a basic HTML structure for the accordion:

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">Accordion Item 1</div>
        <div class="accordion-content">Content for item 1 goes here...</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Accordion Item 2</div>
        <div class="accordion-content">Content for item 2 goes here...</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Accordion Item 3</div>
        <div class="accordion-content">Content for item 1 goes here...</div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling the Accordion

Use CSS to style the accordion. Ensure the .accordion-content is hidden by default.

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: .5rem;
}

.accordion-header {
  background-color: #f5f5f5;
  cursor: pointer;
  padding: .5rem;
  font-weight: 500;
}

.accordion-content {
  display: none;
  padding: .5rem;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript Class for the Accordion

Now, let’s create a JavaScript class:

class Accordion {
    constructor(selector) {
        this.accordion = document.querySelector(selector);
        this.items = this.accordion.querySelectorAll('.accordion-item');
        this.bindEvents();
    }

    bindEvents() {
        this.items.forEach(item => {
            const header = item.querySelector('.accordion-header');
            header.addEventListener('click', () => {
                this.toggleItem(item);
            });
        });
    }

    toggleItem(item) {
        this.closeAll();
        const content = item.querySelector('.accordion-content');
        content.style.display = content.style.display === 'none' ? 'block' : 'none';
    }

    closeAll() {
        this.items.forEach(item => {
            item.querySelector('.accordion-content').style.display = 'none';
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Initializing the Accordion

Initialize the accordion by creating an instance of the Accordion class:

document.addEventListener('DOMContentLoaded', () => {
    new Accordion('.accordion');
});
Enter fullscreen mode Exit fullscreen mode

Benefits of Using JavaScript Classes

  1. Readability and Maintenance: Classes make the code more readable and easier to maintain, especially in larger projects.
  2. Encapsulation: Grouping related properties and methods into a class helps encapsulate functionality.
  3. Reusability: Classes can be easily extended or reused across different parts of an application.
  4. Improved Organization: By using classes, you can better organize your code, which is especially beneficial when working in teams.

Final result

Conclusion

Creating an accordion with JavaScript classes not only simplifies the development process but also enhances the maintainability and readability of your code. This approach allows you to encapsulate functionality, leading to cleaner, more organized, and reusable code. As a frontend developer, mastering such techniques is crucial for building interactive and user-friendly websites.

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay