Q:

Javascript Program to implement Accordion

YasminRadwan26
Save to bookmark
|
2022-05-24
|
  104 
0

Program to implement Accordion using Javascript.

JavaScript programming, examples, JavaScript programming examples,
login and add your own answer to this question

All Answers

YasminRadwan26
2022-05-24
need an explanation for this answer? contact us directly to get an explanation for this answer 

<html>
<head>
<style>
.container {
    background-color: black;
    color: white;
    cursor: pointer;
    padding: 15px;
    width: 16%;
    border: none;
    font-size: 15px;
    }

.active, .container:hover {
    background-color: orange; 
    color: black;
}

.Data {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
    font-size:35px;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<p>Accordions are useful when you want to hide and further show a large amount of content:</p>

<button class="container">Click Me!</button>
<div class="Data">
  <p>Hello TutorialsLink!</p>
</div>

<script>
var a= document.getElementsByClassName("container");
var i;

for (i = 0; i < a.length; i++) {
    a[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var data = this.nextElementSibling;
        if (data.style.display === "block") {
           data.style.display = "none";
        } else {
            data.style.display = "block";
        }
    });
}
</script>

</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Similar questions

need a help?

find thousands of online teachers now