[miniProjects] 12_FAQ Collapse

12_FAQ Collapse

💻 주제 : 접혀있던 질문지를 선택했을 때 카드가 아래로 확장됨.

• font-awesome을 통해 유니코드로 이모지를 받아옴.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

content: '\f075';

toggles.forEach(toggle => {
  toggle.addEventListener('click', () => {
    toggle.parentNode.classList.toggle('active');
  })
})

• querySelectorAll로 토글 버튼 가져오기
• 노드 목록을 이용해 반복문을 통과하고 각각의 토글에는 이벤트를 추가함.(클릭이벤트)
• 부모 클래스 토글(active 클래스)