아코디언(accordion) 메뉴 만들기(4) - JavaScript 코드 작업 1
active 클래스의 display와 height을 변경해주면서
메시지를 누르면 답변글에 해당하는 display는 none에서 block으로 바뀌어 보여지도록 하고
height는 0px 에서 300px로 바뀐다.
수동으로 잘 적용되는지 볼 수 있음.
사용자가 클릭하는 부분을 알아야 함.
그래서 문구에 해당하는 클래스를 변수 panelFaqContainer에 넣고 로그를 찍어봄
주의! 스크립트 위치 수정함.
하지만 js쪽에서 수정하면 위에 선언해도 됨.
로드가 다 되면 실행되도록 수정함.
사용자가 어떤 것을 클릭했는 지 로그로 볼 수 있게 함.
아코디언(accordion) 메뉴 만들기(5) - JavaScript 코드 작업 2
active 클래스는 panel-faq-answer 부분 즉 답변 부분에 추가해야함.
대부분 이렇게 하지만 현재 this가 가리키고 있는 부분은 panel-faq-container 부분이기 때문에 잘 작동되지 않음. 구조를 보면서 코드 작성하기!!
active가 제일 바깥쪽에 추가되어있어서
이렇게 보임
본문을 선택했을 때 잘 나오는 것을 확인할 수 있음.
아코디언(accordion) 메뉴 만들기(6) - JavaScript 코드 작업 3
버튼을 눌렀을 때 active 클래스가 사라지도록 함.
active 클래스는 답변글이 보여주도록 높이 값을 증가시켜주는데 이를 제거함으로써 다시 안보이게 해주는 것.
답변이 보여질 때 애니메이션 효과를 넣어줌
.panel-faq-answer에서 동작이 시작되어 .active로 끝남
.panel-faq-answer에 넣었을 경우에 잘 됨.
.active에 넣었을 경우에도 됨. 하지만 닫기 버튼을 넣었을 때는 효과가 적응이 안됨. 그래서 .panel-faq-answer에 넣으면 닫기 할 때도 transition 효과가 잘 된다!
효과 하나도 어디에 적응하냐에 따라 다르다는 것을 잘 기억하기!
아래에 새로운 정보를 주고 싶다면,
