Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tem como, sem utilizar programação, apenas HTML e CSS, fazer com que uma div fique com o visibility:hidden e depois de clicar um link ela ficar visibility:visible?
Se sim, de que forma?
Vou tentar e ver se dá certo. Mas não entendi o que está acontecendo nesse código, vc poderia me explicar passo-a-passo? A parte do jquery não entendi bulhufas... (rsrs)
Ah, e outra coisa, nos atributos do CSS da id="clique" é onde vc coloca o visibility:hidden? Putz, outra coisa, não sei o que é o style pointer (nunca usei esse atributo).
Acho que pra ficar mais fácil, vou colocar um pedaço do meu código aqui:
<body>
<div id="divTop">
</div>
<div id = "divNavCent">
<h1> Título </h1>
<div id="divText">
<p>Conteúdo</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a enim sit amet ligula sodales gravida sit amet eget purus. Integer nisi erat, pulvinar at imperdiet ultricies, vestibulum id leo. Etiam quis nisl vel lacus volutpat rhoncus.</p>
</div>
<ul>
<li class="liOpcoes">Opção 1</li>
<li class="liOpcoes">Opção 2</li>
<li class="liOpcoes">Opção 3</li>
<li class="liOpcoes">Opção 4</li>
</ul>
<hr />
AQUI QUE EU QUERO QUE TENHA UM LINK QUE HABILITARÁ A PRÓXIMA DIV:
<a href="..." id="botMostrar"> Próximo </a>
<div id="divResposta">
<p>Phasellus neque ipsum, lacinia et mauris ut, interdum tempus orci. Aliquam egestas eget magna ac malesuada. Mauris pulvinar neque a gravida dictum. Nulla non ornare lectus. Nam tempor tortor non dui egestas dictum.</p>
</div>
</div>
<div id = "divRodp">
</div>
</body>Esse daí é o "esqueleto" do meu código HTML. Aí eu preciso que a div "divResposta" esteja escondida, e após clicar no botão "Próximo", ela aparece. A parte do CSS que cuidaria disso é a seguinte:
#divResposta {
border:#F00 solid 5px;
color:#fff;
visibility:hidden;
}Tira esse visibility da divResposta e coloca display:none;
Ta ae
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#botMostrar").click(function(){
$("#divResposta").slideToggle(170);
});
});
</script>
<body>
<div id="divTop">
</div>
<div id = "divNavCent">
<h1> Título </h1>
<div id="divText">
<p>Conteúdo</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a enim sit amet ligula sodales gravida sit amet eget purus. Integer nisi erat, pulvinar at imperdiet ultricies, vestibulum id leo. Etiam quis nisl vel lacus volutpat rhoncus.</p>
</div>
<ul>
<li class="liOpcoes">Opção 1</li>
<li class="liOpcoes">Opção 2</li>
<li class="liOpcoes">Opção 3</li>
<li class="liOpcoes">Opção 4</li>
</ul>
<hr />
AQUI QUE EU QUERO QUE TENHA UM LINK QUE HABILITARÁ A PRÓXIMA DIV:
<div id="botMostrar"> Próximo</div>
<div id="divResposta" display:none;>
<p>Phasellus neque ipsum, lacinia et mauris ut, interdum tempus orci. Aliquam egestas eget magna ac malesuada. Mauris pulvinar neque a gravida dictum. Nulla non ornare lectus. Nam tempor tortor non dui egestas dictum.</p>
</div>
</div>
<div id = "divRodp">
</div>
</body>Gente, muito obrigada!!! As duas alternativas deram certo!!!
Lucastas: vc pode me explicar o código, o que acontece em cada linha? E tbm o porque do "display:none" neste caso?
<script>
$(document).ready(function(){
$("#botMostrar").click(function(){
$("#divResposta").slideToggle(170);
});
});
</script>Maujor: adorei essa sua alternativa, só tive um probleminha: a minha div que ficou escondida, ela realmente ficou escondida, porém, o espaço dela ficou ali... é assim mesmo? É pq após a div escondida, tem mais coisas, e ficou um espaço entre a primeira parte e a segunda parte... (deu pra entender?!?)
Obrigada mesmo!!!
Seguindo:
<script>
$(document).ready(function(){//Aqui eu crio a funçao do click.. quando clicar na div #botMostrar exibir o conteudo da #divResposta
$("#botMostrar").click(function(){
//Aqui é a div que sera exibida depois do click.... voce pode alterar o efeito slideToggle por um de preferencia..
$("#divResposta").slideToggle(170);
});
});
</script>
a div que será exibida depois do click necessita do "display:none;" porque se não ira ficar visivel antes do click, e para ela ficar invisivel ao entrar no site usa-se o display:none;Olá Annes,
A diferença entre visibility: hidden e display: none é que no 1o. caso o box não aparece, mas o espaço que ele ocupa é preservado no layout e para o 2o. caso o espaço é ocupado pelo box seguinte.
Você mencionou na sua pergunta inicial a propriedade CSS visibility, mas o que você precisa para seu caso é a propriedade display.
Refiz o exemplo e ele está em: http://jsfiddle.net/AAgs2/2/
Amei, Maujor!!! Eu não sabia disso... muito obrigada!!! Muito obrigada aos dois... Maujor e Lucastas!
De nada Annes, estamos aqui para ajudar!
Fiz algo parecido