Create an accordion with html, css and javascript

 HTML

<div class="accordion">

  <div class="panel">

    <div class="panel-header" onclick="togglePanel(this)">Panel 1</div>

    <div class="panel-content">

      <p>Content for Panel 1</p>

    </div>

  </div>

  <div class="panel">

    <div class="panel-header" onclick="togglePanel(this)">Panel 2</div>

    <div class="panel-content">

      <p>Content for Panel 2</p>

    </div>

  </div>

  <div class="panel">

    <div class="panel-header" onclick="togglePanel(this)">Panel 3</div>

    <div class="panel-content">

      <p>Content for Panel 3</p>

    </div>

  </div>

</div>

CSS

/* Style the accordion */

.accordion {

  border: 1px solid #ccc;

}

/* Style the panel headers */

.panel-header {

  background-color: #f5f5f5;

  padding: 12px;

  cursor: pointer;

}

/* Style the panel content */

.panel-content {

  padding: 12px;

  display: none;

}

JAVASCRIPT

// Get all the panels on the page

var panels = document.getElementsByClassName("panel");

// Create a function to toggle the panels

function togglePanel(panel) {

  // Loop through all the panels

  for (var i = 0; i < panels.length; i++) {

    // If the current panel is not the one clicked, close it

    if (panels[i].getElementsByClassName("panel-header")[0] !== panel) {

      panels[i].getElementsByClassName("panel-content")[0].style.display = "none";

    }

  }

  // Toggle the clicked panel

  var content = panel.nextElementSibling;