FAQ accordion card

아무것도 클릭하지 않았을 때

화살표 하나 클릭했을 때

두 개 이상 클릭했을 때

[요구사항 & 구현]

1. 주황색 화살표를 클릭하면 숨어있던 텍스트가 보인다

2. 질문 사항 위에 마우스를 올리면 텍스트 색상이 변한다

 

[기술]

HTML, CSS JavaScript

 

[리뷰]

이번 프로젝트는 여러모로 아쉬운 점이 많다.

아코디언 부분을 보면 펼쳐지는 건 문제가 없는데 전부 다 펼쳤을 경우 설정해 둔 container박스 크기를 넘어가버린다.

하나의 질문을 선택한 후 다른 질문을 선택하면 이전에 선택한 아코디언은 원래상태로 돌아갈 수 있도록 구현하고 싶었는데

하지 못했다. 클래스로 active를 부여하고 토글 하면 될 것 같은데 좀 더 시도를 해봐야 할 것 같다.

반응형이 아니라 데스크톱 기준 full 사이즈에서는 문제가 없지만 화면을 줄이면 잘려서 보이지 않는다.

→ 전체적으로 수정이 필요함

const labelBox = document.querySelectorAll('.label-box')
const arrowIcon = document.querySelectorAll('.arrow-icon')


function clickArrowIcon (event){
  // currentLabelBox는 .label-box를 가리킴
  const currentLabelBox = event.currentTarget.parentNode
  // .label-box의 다음 형제 요소는 .hidden
  const hidden = currentLabelBox.nextElementSibling
  hidden.classList.toggle('hidden')

}
arrowIcon.forEach(icon => {
  icon.addEventListener('click', clickArrowIcon)
})

초반에 hidden 클래스를 배열로 불러와서 토글 하니까 하나만 선택해도 전체가 선택되길래 이것을 막기 위해서 currentTargent, parentNode, nextElementSibling을 사용했더니 현재 선택한 것만 작동하도록 바꾸었다.

아직 이 부분에 대한 개념이 확실하지 않아서 공부가 더 필요할 것 같다.

 

 

https://github.com/winterkang/JavaScript-Challenge/tree/main/FAQ-accordion-card

GitHub - winterkang/JavaScript-Challenge