How can I make text turn into a new element (like a divider) when clicked?

Question

I'm trying to find a way to make certain text on the page turn into separators/new elements when clicked. I don't know how to explain it, but like, imagine an image with a title below it - click the title, and then the image above becomes like a text box/different image/scrollable separator. I'm trying to achieve the effect of the page here, where clicking the skull emoji on the right causes a new div/image to appear in the box on the left. I'm looking at the source code and checking what she does to achieve this effect, but I'm still not sure what.

I'm trying to do 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 about java – in fact I’ve only used it once! So this doesn't help me in any way as I'm just trying to figure out some way to make it work even though I have a strong feeling I'm doing it wrong.

Answer 1

Here you can click on the text to show the div containing some text and hide the text you clicked on.

  
BlaBlaBla
  
ANGELO
    sssccc`