<ul id="accordion">
  <li>
    <button aria-controls="content-1" aria-expanded="false" id="accordion-control-1">FAQ 1</button>
    <div class="acc-item-content" aria-hidden="true" id="content-1">
      <p>Answer 1!</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-2" aria-expanded="false" id="accordion-control-2">FAQ 2</button>
    <div class="acc-item-content" aria-hidden="true" id="content-2">
      <p>Answer 2</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-3" aria-expanded="false" id="accordion-control-3">FAQ 3</button>
    <div class="acc-item-content" aria-hidden="true" id="content-3">
      <p>Answer 3</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-4" aria-expanded="false" id="accordion-control-4">FAQ 4 </button>
    <div class="acc-item-content" aria-hidden="true" id="content-4">
      <p>Answer 4</p>
    </div>
  </li>
  <li>
    <button aria-controls="content-5" aria-expanded="false" id="accordion-control-5">FAQ 5</button>
    <div class="acc-item-content" aria-hidden="true" id="content-5">
      <p>Answer 5</p>
    </div>
  </li>
</ul>
ul {
  list-style:none;
} 

#accordion button:focus{
  border-radius:0px;
  outline:none;
}
#accordion button{
    outline: none;
    background-color:DarkSeaGreen;
    padding: 10px;   
    border:none;
    border-bottom: 1px solid darkslategrey; 
    color: white;
    width: 100%;
    text-align:left;
    font-size:16px;
    border-radius:0px;
}
#accordion li{
   border: 1px solid DarkSlateGray;
  border-bottom: none;

}
.acc-item-content{
  padding: 0px 10px;
}
.acc-item:last-child {
  border-bottom: 1px solid DarkSlateGray;
}
#accordion button::after{
  content: "\002B";
  font-weight: 900;
  font-size: 22px;
  float:right;
}

#accordion{
  width:80%;
  max-width: 800px;
  min-width: 275px;
  margin:auto;
}
.acc-item-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

#accordion button.active:after{
    content: "\2212";
  font-weight: 900;
  font-size: 22px;
  float:right;
}
window.addEventListener('DOMContentLoaded', (event) => {
    let buttons = document.querySelectorAll("#accordion button")
    buttons.forEach(button => {
      let content = button.nextElementSibling
      button.addEventListener("click", (event) => {
        if(button.classList.contains("active")){
          button.classList.remove("active")
          button.setAttribute("aria-expanded", false)
          content.style.maxHeight = null
          content.setAttribute("aria-hidden", true)
         }
        else{
          button.classList.add("active")
          content.style.maxHeight = content.scrollHeight + "px";
          content.setAttribute("aria-hidden", false)
          button.setAttribute("aria-expanded", true)
        }
      })

      
    })

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.