Accordion Menu using HTML CSS and JS

What is an Accordion Menu?

An Accordion menu is a vertically stacked list of various pieces of information. For each list, there is a labelled header pointing to corresponding content. Each list's content is hidden by default. Clicking on a particular label will expand its content.

Create three files: style.css, app.js and index.html

style.css
.myaccord{
    border-style: solid;
    border-color: gray;
    box-shadow: gray;
}

.myaccordtitle{
    background-color: gray;
    color: white;
}

.myaccordcontent{
    padding: 10px;
}

app.js
function Accordion(target){
  var ele = document.getElementsByClassName('myaccord')
  for(var i=1;i<=ele.length;i++){
    if(i!=parseInt(target)){
      document.getElementById(i.toString()).removeAttribute('open')
    }
  }
}

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Accordions</title>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>
<body>
  <details class="myaccord" id="1" onclick="Accordion(this.id)">
    <summary class="myaccordtitle">Accordion - 1</summary>
    <div class="myaccordcontent">This is Accordion-1</div>
  </details><br>

  <details class="myaccord" id="2" onclick="Accordion(this.id)">
    <summary class="myaccordtitle">Accordion - 2</summary>
    <div class="myaccordcontent">This is Accordion-2</div>
  </details><br>

  <details class="myaccord" id="3" onclick="Accordion(this.id)">
    <summary class="myaccordtitle">Accordion - 3</summary>
    <div class="myaccordcontent">This is Accordion-3</div>
  </details>
</body>
</html>
Posted by