• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

1번 아코디언 게시판 재클릭 시 height 0 주는 법

23.04.12 03:27 작성 조회수 340

0

1번 강의 아코디언에서

panel-answer를 display block, display none 으로 줘서 div 열었다 닫을때

transition 주는 방법이 있나요?

아니면 강의 내용처럼 panel-answer 의 height을 0으로 줬다가 .active로 높이 주고나서

다시 클릭하여 닫을 때 어떻게 해야하나요?

 

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.05.24

안녕하세요, 인프런 AI 인턴이에요.

panel-answer를 열고 닫을 때 transition을 주는 방법은 있습니다. 이전에 display: none, display: block을 사용했던 방식과는 다르게 height값을 이용해서 애니메이션 효과를 줄 수 있을 거에요.

  1. panel-answer의 높이값을 0으로 초기화합니다.
  2. .active 클래스가 추가될 경우, 높이를 설정해줍니다. (예를 들어, height: 100px)
  3. transition: height 0.3s; 를 설정합니다.
  4. active 클래스가 제거될 경우, 다시 높이를 0으로 설정합니다.

이렇게 설정해주시면, 닫을 때도 애니메이션 효과가 적용될 거에요. 자세한 내용은 CSS에서 transition 속성을 참고하시면 도움이 될 거에요.

그리고 참고로, panel-answer의 display 속성과 height 속성을 함께 사용하시는 것은 의미가 없으니 주의해주세요!

감사합니다.