simple accordion using css and js

<!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>

/* No CSS found */

// No JS found