How to Build a Simple Accordion with JavaScript (JS Accordion)

In this tutorial, we will guide you through the process of creating an accordion in JavaScript. An accordion is a popular UI element that allows users to toggle between hiding and showing content. A simple accordion JavaScript implementation can enhance your website's interactivity. Let’s dive into how you can create your own javascript accordion with minimal code.

Final Output Preview

Before we dive into the code, here is a preview of what we will build:

Simple Accordion Using JavaScript

Step 1: Create the HTML Structure

We'll start by creating a simple HTML structure with multiple accordion items. Each item will have a header (.accordionHead) that users can click to expand or collapse the body (.accordionBody).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Do Code: Simple Accordion Using JS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Simple Accordion Using JS</h1>
        <div class="accordion">
            <div class="accordionItem">
                <div class="accordionHead">
                    <h3>Tab 1</h3>
                    <span class="icon"></span>
                </div>
                <div class="accordionBody">
                    <p>This is the content for Tab 1.</p>
                </div>
            </div>

            <div class="accordionItem">
                <div class="accordionHead">
                    <h3>Tab 2</h3>
                    <span class="icon"></span>
                </div>
                <div class="accordionBody">
                    <p>This is the content for Tab 2.</p>
                </div>
            </div>

            <div class="accordionItem">
                <div class="accordionHead">
                    <h3>Tab 3</h3>
                    <span class="icon"></span>
                </div>
                <div class="accordionBody">
                    <p>This is the content for Tab 3.</p>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explanation:

The container wraps everything inside a styled box.
Each .accordionItem consists of:
- .accordionHead: The clickable title.
- .accordionBody: The content (initially hidden).
The JavaScript will control the opening and closing of these sections.

Step 2: Style the Accordion with CSS

To make our accordion look visually appealing, we'll add some CSS styling.

CSS Code (styles.css):

/* Global Reset */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    max-width: 600px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.accordionItem {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.accordionHead {
    background-color: #2980b9;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.accordionHead:hover {
    background-color: #1f6391;
}

/* Accordion Icon */
.icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.icon::before,
.icon::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background: white;
    top: 50%;
}

.icon::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.3s ease;
}

/* Active state */
.accordionItem.active .icon::after {
    transform: translateY(-50%) rotate(0deg);
}

.accordionBody {
    background: #ecf0f1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordionItem.active .accordionBody {
    max-height: 1000px;
}

.accordionBody p {
    padding: 20px;
}

Explanation:

Styled the accordionHead with hover effects.
Created an animated plus (+) and minus (-) icon.
Used max-height to smoothly expand and collapse the content.

Step 3: Add JavaScript for Functionality

Now, let's write the JavaScript to toggle the accordion when clicked.

JavaScript Code

const accordionItems = document.querySelectorAll('.accordionItem');

accordionItems.forEach((item) => {
    const accordionHead = item.querySelector('.accordionHead');
    
    accordionHead.addEventListener('click', () => {
        if (item.classList.contains('active')) {
            closeAllAccordions();
        } else {
            closeAllAccordions();
            item.classList.add('active');
        }
    });
});

function closeAllAccordions() {
    accordionItems.forEach((item) => {
        item.classList.remove('active');
    });
}

Explanation:

Loops through all .accordionItem elements.
Adds an event listener to toggle active class on click.
Ensures only one accordion is open at a time.

Final Thoughts

That's it! You've successfully created a fully functional and stylish accordion using HTML, CSS, and JavaScript.

Key Takeaways:

Used max-height for smooth transitions.
Created an animated plus/minus icon for better UX.
Used JavaScript to control the accordion behavior.

Try It Yourself!

You can further customize this accordion by Adding more styles Using icons like Font Awesome Expanding multiple items at once

Full Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Do code : simple accordion using js</title>
</head>
<style>
    *,
    *::before,
    *::after {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body {
        height: 100vh;
        font-family: Arial, Helvetica, sans-serif;
        background: linear-gradient(135deg, #6e8efb, #a777e3);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container {
        max-width: 600px;
        background-color: white;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.134);
        border-radius: 15px;
        padding: 20px;
    }

    .container h1 {
        text-align: center;
        text-transform: capitalize;
        color: #333;
        margin-bottom: 20px;
    }

    .accordionItem {
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .accordionItem .accordionHead {
        background-color: #2980b9;
        transition: 300ms ease;
        color: white;
        text-transform: capitalize;
        padding: 20px;
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .accordionItem .accordionHead:hover {
        background-color: #1f6391;
    }

    .accordionItem .accordionHead .icon {
        position: relative;
        isolation: isolate;
        width: 20px;
        height: 20px;
        /* border: 1px solid red; */
    }

    .accordionItem .accordionHead .icon::after,
    .accordionItem .accordionHead .icon::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 5px;
        background-color: white;
        top: 50%;

    }

    .accordionItem .accordionHead .icon::before {
        transform: translateY(-50%);
    }

    .accordionItem .accordionHead .icon::after {
        transform: translateY(-50%) rotate(90deg);
        transition: transform 300ms ease;
    }

    /* change rotation value if tab is opened */
    .accordionItem.active .accordionHead .icon::after {
        transform: translateY(-50%) rotate(0deg);
    }

    .accordionItem .accordionBody {
        background-color: #ecf0f1;
        max-height: 0px;
        height: auto;
        overflow: hidden;
        transition: 300ms ease;
    }

    .accordionItem.active .accordionBody {
        max-height: 1000px;
    }

    .accordionItem .accordionBody p {
        padding: 20px;
    }
</style>

<body>
    <div class="container">
        <h1>simple accordion using js</h1>

        <div class="accordion">
            <!-- accordionItem-1 -->
            <div class="accordionItem">
                <div class="accordionHead">
                    <h3>Tab 1</h3>
                    <span class="icon"></span>
                </div>
                <div class="accordionBody">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, ipsam. Animi architecto sed
                        distinctio consequuntur reiciendis harum ea placeat, veritatis quidem quas praesentium molestias
                        mollitia soluta minima totam explicabo provident fugit consectetur. Optio tempore illum corporis
                        ab libero amet laborum facilis iure sequi harum culpa, autem quasi dignissimos voluptatum
                        voluptas!</p>
                </div>
            </div>
            <!-- accordionItem-2 -->
            <div class="accordionItem">
                <div class="accordionHead">
                    <h3>Tab 2</h3>
                    <span class="icon"></span>
                </div>
                <div class="accordionBody">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, ipsam. Animi architecto sed
                        distinctio consequuntur reiciendis harum ea placeat, veritatis quidem quas praesentium molestias
                        mollitia soluta minima totam explicabo provident fugit consectetur. Optio tempore illum corporis
                        ab libero amet laborum facilis iure sequi harum culpa, autem quasi dignissimos voluptatum
                        voluptas!</p>
                </div>
            </div>
            <!-- accordionItem-3 -->
            <div class="accordionItem">
                <div class="accordionHead">
                    <h3>Tab 3</h3>
                    <span class="icon"></span>
                </div>
                <div class="accordionBody">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, ipsam. Animi architecto sed
                        distinctio consequuntur reiciendis harum ea placeat, veritatis quidem quas praesentium molestias
                        mollitia soluta minima totam explicabo provident fugit consectetur. Optio tempore illum corporis
                        ab libero amet laborum facilis iure sequi harum culpa, autem quasi dignissimos voluptatum
                        voluptas!</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const accordionItems = [...document.querySelectorAll('.accordionItem')];

        accordionItems.forEach((accordionItem) => {
            const accordionHead = accordionItem.querySelector('.accordionHead')
            accordionHead.addEventListener('click', () => {
                if (accordionItem.classList.contains('active')) {
                    closeAllAccordions();
                } else {
                    closeAllAccordions();
                    accordionItem.classList.toggle('active');
                }
            })
        });

        function closeAllAccordions() {
            accordionItems.forEach((accordionItem) => {
                accordionItem.classList.remove('active');
            })
        }
    </script>
</body>

</html>

Conclusion: Enhancing Your Website with a JavaScript Accordion

In this tutorial, you've learned how to create a JavaScript accordion, a versatile and dynamic UI element that allows sections of content to expand and collapse with ease. This technique is perfect for organizing content in a compact format, especially for mobile-friendly websites where space is limited. By incorporating a JS accordion into your design, you can offer a smoother, more interactive user experience.

Whether you're working on a FAQ section, an interactive menu, or any other content that requires dynamic visibility, a JavaScript accordion is an ideal solution. The simplicity of the code allows you to implement this feature quickly, while its flexibility lets you customize the accordion to fit your needs.

Exploring accordion JavaScript opens up new possibilities for enhancing the interactivity and usability of your website. As you experiment with different styles and functionality, you’ll find countless ways to make your content more engaging for users.

By integrating a JS accordion into your next project, you’re not only improving the design but also making the site more user-friendly and efficient. Start using accordion JavaScript today and see the difference it makes in organizing and displaying content!

Tags : #JavaScript accordion #simple accordion using JavaScript #JavaScript FAQ accordion #how to make an accordion in JavaScript #HTML CSS JavaScript accordion #JavaScript toggle content #accordion UI design #accordion javascript #javascript accordion #js accordion