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>

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;
}

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';
        });
    }
}

Initializing the Accordion

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

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

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.