Simple Collapse

소스코드

import { useState } from 'react';
import styled from 'styled-components';

const StyledCollapse = styled.div`
  .content{
    background: blue;
    color: white;
    max-height: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: max-height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  } 


  .content.on {
    max-height: 500px;
    -webkit-transition: max-height 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: max-height 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .arrow {
    background: red;
    svg {
      transform: rotate(${props => props.rotate ? 180 : 0}deg);
      transition: transform 0.3s;
    }
  }
`

const App = () => {

  const [isRotate, setIsRotate] = useState(false);

  const handleCollapse = () => {
    if (document.getElementsByClassName('content')[0].classList.contains('on')) {
      setIsRotate(false);
      return document.getElementsByClassName('content')[0].classList.remove('on');
    }
    setIsRotate(true);
    document.getElementsByClassName('content')[0].classList.add('on');
  }
  
  return (
    <StyledCollapse rotate={isRotate}>
      <div className='content'>
        <p>test</p> 
      </div>
      <div onClick={handleCollapse} className='arrow'>
        <svg xmlns="http://www.w3.org/2000/svg" width="29" height="15" fill="none" viewBox="0 0 29 15">
          <path
            stroke="#797979"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="4.5"
            d="M26.717 2.5l-12 10-12-10"
          />
        </svg>
      </div>
    </StyledCollapse>
  );
}

export default App;

 

 

동작