Comment puis-je transformer le texte en un nouvel élément (comme un séparateur) lorsque je clique dessus ?

Question

J'essaie de trouver un moyen de faire en sorte que certains textes de la page se transforment en séparateurs/nouveaux éléments lorsque vous cliquez dessus. Je ne sais pas comment l'expliquer, mais imaginez une image avec un titre en dessous - cliquez sur le titre, puis l'image ci-dessus devient comme une zone de texte/une image différente/un séparateur déroulant. J'essaie d'obtenir l'effet de la page ici, où cliquer sur l'emoji crâne à droite fait apparaître un nouveau div/image dans la case de gauche. Je regarde le code source et vérifie ce qu'elle fait pour obtenir cet effet, mais je ne sais toujours pas quoi.

J'essaie de faire quelque chose avec le guide onclick de w3schools

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

Je ne connais pas grand-chose à Java – en fait, je ne l’ai utilisé qu’une seule fois ! Donc, cela ne m'aide en aucune façon car j'essaie juste de trouver un moyen de le faire fonctionner même si j'ai le fort sentiment que je le fais mal.

Answer 1

Ici, vous pouvez cliquer sur le texte pour afficher le div contenant du texte et masquer le texte sur lequel vous avez cliqué.

  
BlaBlaBla
  
ANGELO
    sssccc`