Responsive Accordion using JavaScript

Hey, developers welcome to Day 47 of our 90Days 90Projects challenge. And in Day 47 we are going to create a Responsive Accordion using JavaScript.


So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

responsive accordion using javascript, javascript accordion, html accordion using javascript, accordion javascript

HTML Code

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Responsive Accordion using JavaScript </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="accordion-container">
        <div class="accordion">
            <div class="accordionTop">
                <h2> What is HTML Simplified? </h2>
            </div>
            <hr>
            <div class="content">
                <p class="para">
                    A complete html cheatsheet in one PDF at one place. And also you can copy the copy code and run into your code editor.
                </p>
            </div>
        </div>
        <div class="accordion">
            <div class="accordionTop">
                <h2> What is CSS Master Series? </h2>
            </div>
            <hr>
            <div class="content">
                <p class="para">
                    This is series on CSS in which we will learn most important concept of CSS. And like my other previous series you can also download the free of the complete series and also the PDF of all parts.
                </p>
            </div>
        </div>
        <div class="accordion">
            <div class="accordionTop">
                <h2> What is JavaScript Doctory? </h2>
            </div>
            <hr>
            <div class="content">
                <p class="para">
                    This is the pdf of JavaScript Doctory Series by raju_webdev and in this pdf you will get the javascript topics with example and javascript project ideas.
                </p>
            </div>
        </div>
    </div>
</body>
<script src="script.js"></script>
</html>



CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c46629;
}

.accordion {
    color: #000;
    background: #fff;
    width: 25rem;
    height: 2.8rem;
    cursor: pointer;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 9px;
    transition: all 0.3s;
}

.accordion:hover {
    box-shadow: 0 1px 10px rgb(0, 0, 0, 0.5);
}

.accordionTop {
    position: relative;
    margin: 0.6rem 1rem;
}

.accordion h2 {
    font-size: 1.2rem;
}

.accordionTop::after {
    content: '+';
    font-weight: bold;
    font-size: 1.9rem;
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.content {
    height: 0px;
    padding: 1rem;
    transition: all 0.3s;
}

hr {
    opacity: 0;
}

.accordion.active {
    height: auto;
}

.para {
    font-size: 15px;
}

.accordion.active hr {
    opacity: 1;
}

.accordion.active .accordionTop::after {
    content: '-';
}

.accordion.active .content {
    height: auto;
    transition: all 0.3s;
}

@media screen and (max-width: 420px) {
    .accordion {
        width: 90%;
        margin: 0.6rem auto;
    }

    .accordionTop h2 {
        font-size: 1.1rem;
    }
}

JavaScript

const collapse = document.querySelectorAll('.accordionTop')
const myAccordion = document.querySelector('.accordion');
Array.from(collapse).forEach(function (e) {
    e.addEventListener('click', function (e) {
        myAccordion.style.transition = "all 0.3s";
        const current = e.target.parentElement;
        current.classList.toggle('active');
    })
})

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad