Show/Hide animated information by clicking on the widget

Question

I would like to perform a simple animation that is executed in the click event assigned to an element. This is the site that I will use this animation.

Suppose my element is a circle, for example. I want it to get bigger by clicking and show some information. However after execution, there should be a "Close" button for the element to return to its original position (smaller, less information).

How could I do this?

Answer 1

You can easily do this using the method .animate() jQuery :

Example:

HTML:

<div class=container>
<div class=circulo>Mais</div>
<div class=close>X</div>
</div>

Javascript (using jQuery):

function mostraInfo(elemento){
 $(elemento).html("Carregando..."); //coloca o texto "Carregando..." no circulo enquanto realiza animação
  $(elemento).stop().animate({
    width: "200px", //propriedades a serem animadas (objetivo da animacao)
    height: "200px",
    padding: "10% 0 0 10%"
  }, {
    duration: 1000,
    specialEasing: {
        width: "linear",
        height: "linear"
    },
  complete: function() {
    $(elemento).html("informação informação informação informação informação informação informação informação informação informação "); //exemplo de informacoes
    $('.close').show(); //mostra o botao de fechar
  }
 });
}

function escondeInfo(elemento){
 $(elemento).html(""); //limpa o html do elemento (as informacoes)
  $(elemento).stop().animate({
    width: "30px", //valores iniciais
    height: "30px",
    padding: "30px"
  }, {
    duration: 1000,
    specialEasing: {
        width: "linear",
        height: "linear"
    },
  complete: function() {
    $(elemento).html("Mais"); //volta ao texto anterior "Mais"
    $('.close').hide(); //esconde o botao de fechar
  }
 });
}

$('.circulo').click(function(){
  mostraInfo(this);//executa funcao que anima aumentando o circulo e mostra informacoes
});

$('.close').click(function(){
  escondeInfo($('.circulo')); //executa funcao que anima diminuindo o circulo e esconde informacoes
});

Example running on Jsfiddle

Answer 2

I recommend using jQuery, it makes understanding easier and you write less and do more. I made a quick and simple code based on what you gave me:

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: 200px; height:200px; background-color: red; padding:15px; border-radius:200px; line-height:200px; 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").addClass('blue');
        
        else
         $(".conteudo-oculto").removeClass('blue');
        
    });
});

Jsfiddle

---

Version 2

See if this is it (the HTML is the same):

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');
        }
    });
});

Jsfiddle

Answer 3

Javascript free (jsbin):

<div class="circulo" tabindex="0">
  <div class="circulo--informacoes">Umas informações</div>
</div>

.circulo, .circulo--informacoes {transition: all 1s;}
.circulo {
  /* mude a vontade */
  background-color: yellow;
  height: 16px; width: 16px;
  border-radius: 100%;
  overflow: hidden;
}
.circulo--informacoes {opacity: 0;}
.circulo:focus {width: 64px; height: 64px; padding: 64px;}
.circulo:focus .circulo--informacoes {opacity: 1;}