<div class="wrapper">
    
    <h1>Accordion</h1>

    <button class="accordion" type="button">Section 1</button>
    <div class="panel">
      <p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>  
    </div>

    <button class="accordion" type="button">Section 2</button>
    <div class="panel">
      <p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>  
    </div>

    <button class="accordion" type="button">Section 3</button>
    <div class="panel">
      <p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>  
    </div>

    <button class="accordion" type="button">Section 4</button>
    <div class="panel">
      <p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>  
    </div>

  </div>


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  margin: 50px auto;
  font-weight: 400;
  text-align: center;
}

h1 {
  font-size: 70px;
}

button.accordion {
  width: 70%;
  background-color: lightgrey;
  color: #fff;

  cursor: pointer;
  padding: 18px;

  text-align: left;

  font-size: 18px;

  transition: all 0.4s;
}

button:focus {
  outline: none;
}

button.accordion.active,
button.accordion:hover {
  background-color: pink;
}

.panel {
  overflow: hidden;
  width: 67.45%;
  margin: 0 auto;

  padding: 0 18px;
  color: #000;

  max-height: 0;  

  transition: max-height 0.2s linear;
}

div.panel p {
  text-align: left;
}
var btns = document.querySelectorAll('.accordion');

btns.forEach(function(btn) {

  btn.addEventListener('click', function () {
    
    this.classList.toggle('active'); 

    var panel = this.nextElementSibling; 
    // 바로 다음에 있는 형제를 선택 -> hidden 처리되어 있는 panel 영역


    if(panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }

  })

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.