task 10 may

                Never    
Text
        
Download Raw Clone Report Copy 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
        }

        .active,
        .accordion:hover {
            background-color: #ccc;
        }


        .panel {
            padding: 0 18px;
            background-color: white;
            display: none;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <button class="accordion">Heading 1</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, praesentium consequuntur voluptates blanditiis inventore perferendis dolore quo ut molestias ratione.</p>
    </div>

    <button class="accordion">Heading 2</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos assumenda, porro tempora eius optio sit hic nostrum natus, delectus aperiam distinctio nihil recusandae modi id libero laudantium velit molestias, iste fugit ducimus?</p>
    </div>

    <button class="accordion">Heading 3</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam soluta neque incidunt esse, quod repudiandae nostrum et, doloribus magni qui itaque sint repellendus reiciendis omnis fugiat sunt odio illo, mollitia perferendis deserunt.</p>
    </div>
    <script>
        var acc = document.getElementsByClassName("accordion");
        let panel = document.getElementsByClassName("panel");
        for (let i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                this.classList.toggle("active");
                if (panel[i].style.display === "block") {
                    panel[i].style.display = "none";
                } else {
                    panel[i].style.display = "block";
                }
            });
        }
    </script>
</body>

</html>

Raw Text

Recent Public Pastes