JSFiddle - React, Tailwind, and code Playground

HTML

<div class='conteudo-oculto'> 
    <div>Conteudo da sua mensagem</div>
    <span style='display:none'>Mensagem oculta</span>
</div>

CSS

.conteudo-oculto span { display none; }
.blue { background-color: blue !important }
.conteudo-oculto { display: block; width: 100px; padding-top:15px; height:100px; background-color: red; padding:15px; border-radius:100px; text-align:center; cursor:pointer }

JavaScript

$( function (){
    $(".conteudo-oculto").click( function(){
        $(".conteudo-oculto div, .conteudo-oculto span").toggle();
        
        if( !$(".conteudo-oculto").hasClass('blue') ){
            $(".conteudo-oculto").animate({
                height:'200px',
                width:'200px',
                'border-radius': '200px'
                
            },1000);
            $(".conteudo-oculto").addClass('blue');
        }
        else {
            $(".conteudo-oculto").animate({
                height:'100px',
                width:'100px',
                'border-radius': '100px'
                
            },1000);            
         $(".conteudo-oculto").removeClass('blue');
        }
    });
});