【JavaScript】accordion

[ html ]

    <section class="page">
      <ul class="accordion">
        <li>
          <button class="accordion-control">Classics</button>
          <div class="accordion-panel">
            <p>If you ...</p>
          </div>
        </li>
        <li>
          <button class="accordion-control">The Flower Series</button>
          <div class="accordion-panel">
            <p>Take your...</p>
          </div>
        </li>
        <li>
          <button class="accordion-control">Salt o' The Sea</button>
          <div class="accordion-panel">
            <p>Ahoy! ...</p>
          </div>
        </li>
      </ul>
    </section>
   <script src="http://code.jquery.com/jquery-3.3.1.min.js"
                       integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                       crossorigin="anonymous">
    </script>
    <script src="js/accordion.js"></script>

[ css ]

.accordion, .menu {
  background-color: #f2f2f2;
  color: #666;
  margin: 0;
  padding: 0;
  overflow: auto;}

.accordion li {
  padding: 0;
  list-style-type: none;}

.accordion-control {
  background-color: #303030;
  color: #fff;
  display: block;
  width: 100%;
  padding: 0.5em 0.5em 0.5em 0.7em;
  margin: 0;
  border-top: 1px solid #666;}

.accordion-panel {
  display: none;}

.accordion-panel p {
  margin: 20px;}

.accordion-panel img {
  display: block;
  clear: left;}

[ accordion.js ]

//Jquery version

$('.accordion').on('click', '.accordion-control', function(e){
e.preventDefault();
$(this).next('.accordion-panel').slideToggle();
});

//javascript version

let acc = document.getElementsByClassName("accordion-control");

for(let i=0;i<acc.length;i++) {

acc[i].addEventListener('click',function(){

let panel = this.nextElementSibling;

if(panel.style.display === "block"){

panel.style.display = "none";

} else {

panel.style.display = "block";

}

},false);

}