accordion button

먼저, iccordion-item부모태그안에 버튼과 버튼을 누를때 나올 문장을 형제관계로 만든다.

<div class="accordion-wrap">
      <div class="accordion-item">
        <button
          class="accordion-btn"
          aria-expanded="false"
          aria-controls="accordion1"
        >
          Accordion 1
        </button>
        <div class="accordion-content" hidden>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi unde
            impedit odio temporibus magnam fugiat deleniti quis. Dolorem
            asperiores neque architecto, necessitatibus eos sit, commodi placeat
            officia odit, sequi accusamus.
          </p>
        </div>
      </div>
      <div class="accordion-item">
        <button
          class="accordion-btn"
          aria-expanded="false"
          aria-controls="accordion1"
        >
          Accordion 2
        </button>
        <div class="accordion-content" hidden>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi unde
            impedit odio temporibus magnam fugiat deleniti quis. Dolorem
            asperiores neque architecto, necessitatibus eos sit, commodi placeat
            officia odit, sequi accusamus.
          </p>
        </div>
      </div>
      <div class="accordion-item">
        <button
          class="accordion-btn"
          aria-expanded="false"
          aria-controls="accordion1"
        >
          Accordion 3
        </button>
        <div class="accordion-content" hidden>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi unde
            impedit odio temporibus magnam fugiat deleniti quis. Dolorem
            asperiores neque architecto, necessitatibus eos sit, commodi placeat
            officia odit, sequi accusamus.
          </p>
        </div>
      </div>
    </div>

button에 aria-expanded="false" 로 닫혀있는 상태를 만들고
버튼을 누르면 "true"로 속성값을 변화시킬것이다.
"true"시 accordion-content 클래스에 hidden속성을 "false"로 바뀌게 할것이다.

.accordion-wrap {
  max-width: 40rem;
  margin: 0 auto;
}

.accordion-wrap .accordion-item {
  width: 33.8rem;
}
.accordion-wrap .accordion-item .accordion-btn {
  position: relative;
  text-align: left; 
  background-color: #f3f1e0;
  border: 1px solid #a9a9a9;
  border-radius: 3px;
  color: black;
  padding: 2rem 20rem 2rem 2rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: 900;
  transition: 0.3s;
  white-space: nowrap;
}
.accordion-wrap .accordion-item .accordion-btn::before {
  content: "";
  position: absolute;
  right: 1rem;
  top: 45%;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(45deg);
  color: black;
  transition: 0.3s;
}

.accordion-wrap .accordion-item .accordion-content {
  max-width: 40rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: rgb(162, 162, 162);
  padding: 1rem;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
  border: 1px solid #a9a9a9;
}
.accordion-wrap
  .accordion-item
  .accordion-btn[aria-expanded="true"]
  + .accordion-content {
  max-height: 13rem;
}

.accordion-wrap .accordion-item .accordion-btn[aria-expanded="true"]::before {
  transform: rotate(-135deg);
  top: 50%;
}

.accordion-content가 hidden일때,

.accordion-content가 hidden이 "false"일때,

const accordionItems = document.querySelectorAll(".accordion-item");

accordionItems.forEach((item) => {
  const accordionButton = item.querySelector(".accordion-btn");
  const accordionContent = item.querySelector(".accordion-content");

  accordionButton.addEventListener("click", () => {
    const expanded = accordionButton.getAttribute("aria-expanded") === "true";

    accordionButton.setAttribute("aria-expanded", !expanded);

    if (expanded) {
      accordionContent.setAttribute("hidden", "true");
    } else {
      accordionContent.removeAttribute("hidden");
    }
  });
});

버튼과 컨텐츠의 부모인 ".accordion-item"를 불러준다.
여러개이므로 forEach를 ".accordion-btn"와 ".accordion-content"를 돌려준다.
버튼을 먼저, 클릭하고 나와야하므로, 버튼먼저 addEventListener"click"시 버튼의 "aria-expanded"를 "true"로 만들고 "aria-expanded"에 !expanded속성을 넣어준다.
그리고 if문으로 expanded일때 컨텐츠 hiiden에 true속성을 그게아니라면 hiiden을 제거한다.

끝!