📍반복문 순회하면서 해당 제목 클릭 시 콜백 처리

HTML

       <tbody class="text-center">
          <tr>
            <td>1</td>
            <td class="text-left" width="50%">
              <div class="panel-faq-container">
                <p class="panel-faq-title">What is Lorem Ipsum</p>
                <div class="panel-faq-answer">
                  <p>Answer(1)...↓</p>
                  <p>
                    Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry...
                  </p>
                </div>
              </div>
            </td>
            <td>이용안내</td>
            <td>2023.01.01</td>
            <td>84</td>
          </tr>
           </tbody>

JS

const panelFaqContainer = document.querySelectorAll(".panel-faq-container");
const panelFaqAnswer = document.querySelectorAll(".panel-faq-answer");


for (let i = 0; i < panelFaqContainer.length; i++) {
    panelFaqContainer[i].addEventListener("click", function () {
      panelFaqAnswer[i].classList.add("active");
    });
  }

*제목 클릭시 --> 본문이 보이게 --> active 클래스 추가

.active시 css

.active {
  display: block; /*hidden->block*/
  height: 300px; /*0->300*/
}

📍모두 닫기 버튼 클릭

HTML

<button id="btn-all-close">FAQ ALL Close</button>

JS

const btnAllclose = document.getElementById("btn-all-close");

btnAllclose.addEventListener("click", function () {

    //버튼 클릭시 처리할 일
    for (let i = 0; i < panelFaqAnswer.length; i++) {
      panelFaqAnswer[i].classList.remove("active");
    }
  });

📌완성코드

window.onload = () => {
  //panel-faq-container
  const panelFaqContainer = document.querySelectorAll(".panel-faq-container");
  console.log(panelFaqContainer);

  //panel-faq-answer
  const panelFaqAnswer = document.querySelectorAll(".panel-faq-answer");
  console.log(panelFaqAnswer);

  //btn-all-close
  const btnAllclose = document.getElementById("btn-all-close");
  console.log(btnAllclose);

  //반복문 순회하면서 해당 FAQ 제목 클릭 시 콜백 처리
  for (let i = 0; i < panelFaqContainer.length; i++) {
    panelFaqContainer[i].addEventListener("click", function () {
      //클릭시 처리 할 일
      console.log("클릭" + i);

      //this.classList.add("active"); container에 active 적용
      panelFaqAnswer[i].classList.add("active");
    });
  }

  btnAllclose.addEventListener("click", function () {
    console.log("모두 닫기 버튼 클릭");

    //버튼 클릭시 처리할 일
    for (let i = 0; i < panelFaqAnswer.length; i++) {
      panelFaqAnswer[i].classList.remove("active");
    }
  });
};

---

📍다시 클릭 시 메뉴 닫히기

//panel-faq-container
  const panelFaqContainer = document.querySelectorAll(".panel-faq-container");

  //panel-faq-answer
  const panelFaqAnswer = document.querySelectorAll(".panel-faq-answer");

  //btn-all-close
  const btnAllclose = document.getElementById("btn-all-close");
  
  
  for (let i = 0; i < panelFaqContainer.length; i++) {
    panelFaqContainer[i].addEventListener("click", function () {
      const answer = panelFaqAnswer[i];
      const Clickhandler = answer.classList.contains("active");
      if (!Clickhandler) {
        answer.classList.add("active");
      } else {
        answer.classList.remove("active");
      }
    });
  }

---

아코디언 메뉴 추가

아코디언 메뉴 심화