How do I make text turn into a new element (Like a divider) onclick?

I’m trying to find a way to make some text on my page turn into a divider/new element when I click it. I’m not sure how to explain it, but like, imagine an image with a caption beneath – You click the caption then the image above becomes like a box of text/a different image/a scrollable divider. I’m trying to achieve the effect of the page here, in which clicking the skull emoji on the right results in a new div / image appearing in the box on the left. I’m looking through the source code & inspecting what she did to make this effect and I’m still unsure what.

I was attempting something using the w3schools onclick guide

`<img src="yay.png">
<p id="angelo" onclick="myFunction()">ANGELO</p>
<script>
function myFunction() {
document.getElementById("angelo") InnerText =" <div id="info"> Blabla </div> " ;
}
</script>`

I don’t know much at all about java- infact i have only used it once! so this didn’t aid me by any means of the word as I was just attempting to figure out some way to make it work, though I have a strong feeling i’m doing it wrong.