HTML 코드:

<h1>Accordion</h1>
    <h3>Click the button</h3>
    <div class="accordion">
      <button type="button" class="acc">What is Html?</button>
      <div class="panel">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

    <div class="accordion">
      <button type="button" class="acc">What is CSS?</button>
      <div class="panel">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

Js 코드:

let acc = document.getElementsByClassName('acc');

for(let i=0; i< acc.length; i++){
    acc[i].addEventListener('click', function() {
        this.classList.toggle("active");
        let panel = this.nextElementSibling;
        if(panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    })
}

CSS 코드:

body {
  height: 100vh;
  background-color: #eee;
}

button {
  text-align: left;
  padding: 10px;
  margin-right: 5px;
  cursor: pointer;
  width: 50%;
  border-color: 1px solid #ccc;
}

button::before {
  content: "+";
  padding: 10px;
}

.active {
  background-color: #2c2b2b;
  color: #fff;
}
.active::before {
  content: "-";
  padding: 10px;
}

.panel {
  display: none;
  width: 50%;
 padding-left: 10px;
}