Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GustavoDose

Show/Hide com css3

Recommended Posts

Bom dia galera.

 

 

Alguém sabe como fazer ao clicar em uma div abrir outra em baixo dela apenas com css ?

 

Mas que esta tenha um efeito de transição como um fade por exemplo ?

 

Procurei algo mais não achei nenhum tutorial ou algo assim ensinando a fazer.

 

 

Vlw

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não é possível com CSS puro, quando clicar a outra div apareça.

O modo que se pode fazer é usando o pseudo ACTIVE porém esta outra div ficará visivel somente enquanto a pessoa SEGURAR o clica na primeira div.

div:active div.escondida{
    display: block;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ai não resolver o problema ;/

 

no entanto meu problema ainda é que se clicar em outra div feche a anterior e abra a proxima ;/

 

vou ter que usar js , alguem sabe como fazer ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Compartilhar este post


Link para o post
Compartilhar em outros sites

Com jQuery, você pode ocultar e mostrar elementos HTML com o hide () e show () métodos:

 

Exemplo

 

$("#hide").click(function(){
$("sua_div").hide();
});

$("#show").click(function(){
$("sua_div").show();
});

Sintaxe:

 

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

O parâmetro de velocidade opcional especifica a velocidade do hiding/showing, e pode ter os seguintes valores: "Slow", "fast", ou milissegundos.

O parâmetro opcional callback é uma função a ser executada após o hide () ou método show () concluída

O exemplo a seguir demonstra o parâmetro de velocidade com hide ():

 

Exemplo

$("button").click(function(){
$("p").hide(1000);
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Entendi... meu problema e que tenho 6 blocos com 6 conteudos diferentes, e quando clicar em um bloco abra o seu determinado conteudo ;(

 

Consegui fazer desta forma:

<script>
    $('.bloco-2').hide()
    $('.bloco').click(function() {
        var box = $(this).attr("id");
        $('.' + box).slideToggle('fast');
        return false;
});
</script>

 

so tenho uma duvida agora. Como faço para quando clicar em outro bloco fechar o que esta aberto e abrir aquele em que cliquei :(

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entendi... meu problema e que tenho 6 blocos com 6 conteudos diferentes, e quando clicar em um bloco abra o seu determinado conteudo ;(

 

Consegui fazer desta forma:

 

<script>
    $('.bloco-2').hide()
    $('.bloco').click(function() {
        var box = $(this).attr("id");
        $('.' + box).slideToggle('fast');
        return false;
});
</script>

 

so tenho uma duvida agora. Como faço para quando clicar em outro bloco fechar o que esta aberto e abrir aquele em que cliquei :(

 

 

segue o html:

 

<div class="bloco toggle" id="teste-2">

</div>

 

 

<div class="teste bloco-2 teste-2>

<h2>teste</h2>

</div>

 

segue o html:

 

<div class="bloco toggle" id="teste-2">

</div>

 

 

<div class="teste bloco-2 teste-2>

<h2>teste</h2>

</div>

 

 

Ainda tenho outro problema. como o site so tem uma pagina, gostaria que quando clicasse no menu que esta no topo do site tivesse uma ancora que quando clicar no menu tambm abra a div oculta que esta em um dos blocos.

 

Alguem sabe como fazer ???

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.