리액트 CSS - 간단한 accordion 만들기

리액트 전체 링크

 

FAQ에서 Quesition을 누르면 Answer가 나오도록 아래와 같이 display: none을 주었다.

하지만 조금 딱딱한 느낌이 난다.

  .faq-card-answer {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    padding-right: 2rem;
    border: 0px solid rgba(225,228,230,.5);
    border-top-width: 1px;
  }
  
  .faq-card-none {
    display: none;
  }

 

css에서 간단한 작업으로 아코디언을 만들 수 있다.

 

display: none은 애니메이션 적용이 되지 않으므로, 

아래와 같이 padding, bottom, height, 그리고 visibility를 hidden으로 변경한 후 transition을 적용한다.

  .faq-card-answer {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    padding-right: 2rem;
    border: 0px solid rgba(225,228,230,.5);
    border-top-width: 1px;

    transition:padding-top 0.5s, padding-bottom 0.5s, height 0.5s, transform 0.5s;
  }
  
  .faq-card-none {
    padding-top: 0rem;
    padding-bottom: 0rem;
    height: 0px;
    
    visibility: hidden;
    transition:padding-top 0.5s, padding-bottom 0.5s, height 0.5s, transform 0.5s;
  }

 

아래와 같이 부드럽게 열리고 닫히게 할 수 있다.