Criação de botão de curiosidades

Estou tentando criar um site para um projeto de escola, onde devo documentar doenças hematológicas relacionadas à hemácias. O projeto pede a inserção de uma funcionalidade criada através de JavaScript, logo, tive a ideia de criar um botão de curiosidades em cada doença que ao clicado, criaria faria um efeito de animação e criaria uma div em formato de balão de fala comunicando a curiosidade ao usuário, segue abaixo um exemplo:

https://view.genial.ly/63c443209c628c0011443197/interactive-content-genially-sem-titulo

tentei através dos seguintes códigos:

`<div class="texto1">
           Nas anemias hemolíticas as hemácias morrem ou são destruídas antes do seu ciclo normal de vida, que é de 120 dias. Desta forma a medula óssea não consegue repor todas as hemácias destruídas, causando a redução da presença destas células no sangue.

           <ul>
               <li><span class="titulos_doencas">Anemia Falciforme</span>
                   <div class="doenca_img">                        
                       <img src="./imagens/conteudo/anemia_falciforme-300x164.jpg" alt="falciforme e padrão" class="fotosimg">
                       <p>A anemia falciforme tem origem hereditária, sua presença pode ocasionar uma expectativa de vida baixa, dor nos ossos e articulações e pele amarelada. Sua causa é a alteração nos glóbulos vermelhos (hemácias).
                       </p>
                       <div class="curiosidades">
                           <div id="mostrarcuriosidade"></div>
                           <img src="./imagens/interacao/curiosity(1).png" alt="curiosidades!" id="curiosidadesclick">
                       </div>

               </li>
           </ul>
       </div>`
       
       `.curiosidades{
       position: absolute;
       bottom: 0;
       right: 0;
   }

   #mostrarcuriosidade{
       width: 0;
       height: 0;
       position: absolute;
       right: 3vw;
       bottom: 0;
       background-color: #F05161;
       z-index: -1;
       opacity: 0;
   }`
   
   var mostra = false;
var clique = document.getElementById(curiosidadesclick);

function mostrarOuNao(){
 if(mostra = false){
   mostra = true;
 } else{
   mostra = false;
 }
}

function curiosidade(){
 if(mostra){
   document.getElementById(mostrarCuriosidade).style.width = "20vw";
   document.getElementById(mostrarCuriosidade).style.opacity = "1";
   document.getElementById(mostrarCuriosidade).style.height = "5vh"
 }
}

clique.onclick(mostrarOuNao(evento));`

infelizmente através deste código não consegui resultado algum, gostaria de alguma luz sobre o que pode ser feito para alcançar o resultado desejado!