Ir para conteúdo

POWERED BY:

Arquivado

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

Annes

Alterar visibility entre hidden e visible só com HTML e CSS: possível?

Por , em Desenvolvimento frontend

Recommended Posts

Annes    1

Annes
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

LucasCairesF    8

LucasCairesF
Postado

Fiz algo parecido 

 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
<script> 
$(document).ready(function(){
$("#clique").click(function(){
$("#conteudo").slideToggle(170);
});
});
</script>
<div id="clique" style="cursor:pointer;"> Clicar aqui!</div>
 
 
<div id="conteudo" style="display:none;"> conteudo da div...</div>
Seria isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

LucasCairesF    8

LucasCairesF
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

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!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

LucasCairesF    8

LucasCairesF
Postado

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;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

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/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Amei, Maujor!!! Eu não sabia disso... muito obrigada!!! Muito obrigada aos dois... Maujor e Lucastas!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito