Recently, I implemented a collapsible feature using React and it's functioning well. However, one issue I encountered is that when the collapsible div closes, it doesn't smoothly collapse with the border bottom moving up as smoothly as it opens. Instead, it abruptly goes to the top, creating a glitchy effect. The styled components used are as follows:
const CollapsableContent = styled.div`
text-align: center;
font-size: 1.2rem;
opacity: ${props => (props.open ? "1" : "0")};
max-height: ${props => (props.open ? "100%" : "0")};
padding: ${props => (props.open ? "15px" : "0 15px")};
overflow: hidden;
transition: all 0.3s ease-out;
`
For a more detailed code explanation and demonstration, check out the codesandbox link. Feel free to click anywhere on the text in the sandbox environment.