Programming Support: 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>

Pages

Accordion Menu using HTML CSS and JS

What is an Accordion Menu?

No comments:

Post a Comment

Total Pageviews