Javascript 없이 FAQ 아코디언 만들기!?

제품 또는 플랫폼이 있고 일반적으로 묻는 질문을 예상했습니다. 동일한 질문에 반복적으로 답변하는 시간을 절약하기 위해 FAQ(자주 묻는 질문) 페이지를 구축할 시간입니다.

아름다운 아코디언 FAQ를 만들기 위해 Javascript를 만질 필요조차 없다는 것을 알고 계셨습니까? 미친 것 같죠?! HTML과 CSS만 있으면 됩니다. 이 데모에서는 Tailwind 3+(JIT와의 통합으로 인해)를 사용하여 얼마나 쉬운지 보여드리겠습니다. 시작하자!

전체 소스 코드를 원하시면 맨 아래로 건너뛰십시오.

가장 기본적인 마크업부터 시작하겠습니다.

<section>
  <details>
    <summary>
      Question 1
    </summary>
    <p>Answer 1.</p>
  </details>

  <details>
    <summary>
      Question 2
    </summary>
    <p>Answer 2.</p>
  </details>

  <details>
    <summary>
      Question 3
    </summary>
    <p>Answer 3.</p>
  </details>
</section>

details 태그는 기본적으로 요약 외부의 콘텐츠를 표시하거나 숨길 수 있는 기능을 자동으로 제공합니다. Javascript를 사용하여 완전히 건너뛸 수 있는 모든 마법이 일어나는 곳입니다.

가장 먼저 해야 할 일은 브라우저의 기본 화살표 문자를 제거하여 모든 스타일을 직접 지정할 수 있도록 하는 것입니다. Tailwind에는 marker:라는 편리한 의사 요소 선택기가 있어 스타일을 지정할 수 있습니다. marker:hidden가 성가신 화살을 제거하는 트릭을 수행할 것이라고 생각할 수도 있지만 놀랍게도 그렇지 않습니다! 그러나 브라우저는 그것들을 인라인 텍스트로 취급하기 때문에 글꼴 크기를 0으로 설정하여 간단히 사라지게 할 수 있습니다. 각 <summary> 태그에 다음을 추가하면 트릭을 수행합니다: class="marker:[font-size:0px]"

<section>
  <details>
    <summary class="marker:[font-size:0px]">
      Question 1
    </summary>
    <p>Answer 1.</p>
  </details>

  <details>
    <summary class="marker:[font-size:0px]">
      Question 2
    </summary>
    <p>Answer 2.</p>
  </details>

  <details>
    <summary class="marker:[font-size:0px]">
      Question 3
    </summary>
    <p>Answer 3.</p>
  </details>
</section>

이제 추악한 화살표를 제거했으므로 우리만의 화살표를 추가할 수 있습니다. 요약을 플렉스 상자로 만들고 svgs를 추가하여 보기 좋게 만들 수 있습니다.

<details>
<summary class="flex flex-row items-center justify-between marker:[font-size:0px]">
  Question 1
  <svg class="h-6 w-6 rotate-0 transform text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
  </svg>
  </summary>
  <p>Answer 1.</p>
</details>

대박! 이제 멋진 화살표가 생겼습니다. 훨씬 좋아 보인다. 그러나 즉시 문제가 있음을 알 수 있습니다. 콘텐츠가 확장되었음을 표시하기 위해 열 때 회전하지 않습니다.

요약 태그를 클릭하면 open의 html 속성이 추가되는 것을 볼 수 있습니다. 우리는 이것을 CSS로 대상화하여 css를 svg에 적용하고 그에 따라 변환하고 회전하도록 할 수 있습니다. 이렇게 하려면 group 요소에 Tailwind의 details 클래스를 적용하여 svg가 변경될 때 반응하도록 해야 합니다. svg 자체에 클래스group-open:rotate-180를 추가합니다.

<details class="group">
<summary class="flex flex-row items-center justify-between marker:[font-size:0px]">
  Question 1
  <svg class="h-6 w-6 rotate-0 transform text-gray-400 group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
  </svg>
  </summary>
  <p>Answer 1.</p>
</details>

이제 정말 함께하기 시작했고 여전히 Javascript가 필요하지 않았습니다. 색상, 글꼴 크기, 패딩에 약간의 광택을 추가하고 마우스를 가져가면 커서가 포인터로 변경되도록 해 보겠습니다.

<section class="grid grid-cols-1 gap-y-3 divide-y">
  <details open class="group py-1 text-lg">
    <summary class="flex cursor-pointer flex-row items-center justify-between py-1 font-semibold text-gray-800 marker:[font-size:0px]">
      Question 1
      <svg class="h-6 w-6 rotate-0 transform text-gray-400 group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
      </svg>
    </summary>
    <p class="text-gray-500">Answer 1.</p>
  </details>
  ...

거의 완성된 모습really입니다. 개인적인 손길을 추가하기만 하면 답변할 시간이 없는 모든 질문에 답할 준비가 되어 있습니다!

마지막으로 알아야 할 사항은 open 태그에 <details> 속성을 추가하면 페이지 로드 시 자동으로 확장된다는 것입니다. 이것을 Javascript 스니펫과 함께 사용하거나 단순히 방문자를 위해 첫 번째 항목을 이미 열도록 할 수 있습니다. 확장 시 <summary> 태그에 스타일을 더 적용해야 하는 경우 Tailwind에서 marker: 유사 선택기를 사용하면 됩니다.

이 Tailwind Playground에서 전체 소스 코드를 볼 수 있습니다.

이 글이 마음에 드셨다면 좋아요를 주시거나 트위터에 공유해주세요!