accordion.html

<!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>Accordion</title>
    <style>
        .accordion{
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
            font-size: medium;
        }
        /* Add a bg color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it(hover) */
        .active, .accordion:hover{
            background-color: #ccc;
        }
        .panel{
            padding: 0 18px;
            background-color: white;
            display: none;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <button class="accordion">Section 1</button>
        <div class="panel">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod, totam!</p>
        </div>
    <button class="accordion">Section 2</button>
        <div class="panel">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod, totam!</p>
        </div>
    <button class="accordion">Section 3</button>
        <div class="panel">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod, totam!</p>
        </div>
    
<script>
    var acc=document.getElementsByClassName("accordion");
    var i;
    
    for(i=0;i<acc.length;i++){
        acc[i].addEventListener("click",function(){
            // Toggle between adding and removing the "active", to highlight the button that controls the panel 
            this.classList.toggle("active");

            // Toggle between hiding and showing the active panel 
            var panel = this.nextElementSibling;
            if(panel.style.display === "block"){
                panel.style.display="none";
            }else{
                panel.style.display="block";
            }
            });
    }
</script>
</body>
</html>