Collapse an Element with Position: Absolute

Question

I'm trying to make the "Open Chat" button reveal an Absolute positioned div, then collapse it once clicked again.

I tried using the component react-collapse but it doesn't work when the content of the div is positioned absolute, though it works when positioned static/relative. The first click will reveal the content, but the second click won't hide it. Why does this happen? Does anyone know how to go about this?

And the reason I want absolute content to be shown is so I can overlay the chat box on top of my other content, as seen in the image. Thanks!

Answer 1

you can achieve this without using react-collapse , just use a state variable as a condition for your components ,isVisisble for example . you'll need to pass the state variable from your navbar to the ChatComponent . and on OpenChat click toggle isVisisble

<ChatComponent style={{...ur other styles , display : props.isVisisble ? 'block':'none'}} />