바닐라 자바스크립트를 사용하여 아코디언 만들기

HTML, CSS 및 Vanilla Javascript를 사용하여 팩트 아코디언을 만들어 봅시다

먼저 아코디언의 HTML 뼈대를 만듭니다. 4개의 팩트 카드가 있습니다. 따라서 HTML은 아래와 같이 표시됩니다.

    <div class="container">
      <h2 class="accordion-title">Facts About Mars!</h2>
      <div class="faq-container grid">

        <div class="faq-item">
          <header class="faq-header">
            <i class="ri-add-line"></i>
            <h4 class="faq-header-title">Also known as the Red Planet</h4>
          </header>
          <div class="faq-desp">
            <p class="faq-desp-content">
              This is because Mars is covered in soil, rock, and dust made from
              iron oxide which gives the surface a red rusty colour
            </p>
          </div>
        </div>

     </div>
    </div>

[faq-container 클래스가 있는 div] 안에 3개의 팩트 카드 [faq-item 클래스가 있는 div]가 더 있습니다. CSS 그리드를 사용하여 팩트 카드를 구성합니다..grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
우리의 목표는 카드 헤더[faq-header 클래스가 있는 헤더 태그]를 클릭하여 Facts 카드 설명[faq-desp 클래스가 있는 div 태그]을 표시하거나 숨기는 것입니다.

먼저 아래와 같이 CSS 속성 height: 0px 및 overflow: hidden을 사용하여 Facts 카드 설명을 숨깁니다..faq-desp {
overflow: hidden;
height: 0px;
}
이제 흥미로운 부분은 Javascript를 사용하여 설명을 전환(표시/숨기기)하는 것입니다. 아래 코드 조각:

const faqItems = document.querySelectorAll(".faq-item");

faqItems.forEach((faq) => {
  const faqHeader = faq.querySelector(".faq-header");

  faqHeader.addEventListener("click", () => {
    const openFaq = document.querySelector(".faq-open");

    toogleFaq(faq);

    if (openFaq && openFaq !== faq) {
      toogleFaq(openFaq);
    }
  });
});

const toogleFaq = (faq) => {
  const faqDescription = faq.querySelector(".faq-desp");

  if (faq.classList.contains("faq-open")) {
    faqDescription.removeAttribute("style");
    faq.classList.remove("faq-open");
  } else {
    faqDescription.style.height = faqDescription.scrollHeight + "px";
    faq.classList.add("faq-open");
  }
};

목표를 달성하기 위한 단계:

querySelectorAll을 사용하여 모든 사실 카드 선택

forEach를 사용하여 각 카드를 반복하고 카드 헤더를 선택합니다

.

헤더에 클릭 이벤트 리스너를 추가하고 이벤트 리스너의 콜백 함수에서 카드를 인수로 사용하여 토글 함수(팩트 카드 설명 표시/숨기기)를 호출합니다

.

전환 기능은 카드 설명을 선택하고 scrollHeight와 동일한 높이의 인라인 스타일을 추가합니다. [scrollHeight 속성은 패딩을 포함하여 요소의 높이를 반환하지만 테두리, 스크롤 막대 또는 여백은 제외]

목표를 달성했습니다. 나머지 아코디언을 보기 좋게 만들기 위해 추가 스타일을 추가했습니다

.

여기Code Sandbox의 codesandbox에서 전체 코드를 찾으십시오.