Ir para conteúdo

POWERED BY:

Arquivado

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

Worn

Efeito mostrar

Por , em Javascript

Recommended Posts

Worn    1

Worn
Postado

Olá amigos procurei no site e no google um efeito que esse do spoiler, igual ou parecido para adicionar no meu website, quero que quando as pessoas clicar nele abrir uma mensagem aqui esse exemplo

 

 

Mensagem aqui

 

 

alguém sabe aonde eu posso encontrar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é só setar a altura do elemento para 0 com overflow hidden qndo quiser esconder, e para auto ou algo suficientemente grande em px para quando quiser mostrar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

juniorbezerra    6

juniorbezerra
Postado

Apesar da galera saber, está bem difícil de ajudar, esses fóruns já foram bem melhores. Segue abaixo algo que creio seja isso que você quer:

 

JAVASCRIPT

<script type="text/javascript"> 
$(document).ready(function(){
$('#mostra').click(function(){
//mostra div
$('#divMostra').show();
});
$('#fecha').click(function(){
//oculta div
$('#divMostra').hide();
});
});     
</script>

HTML

<p><a href="javascript: void(0);" id="mostra" class="Link"><b>[MOSTRAR]</b></a> <a href="javascript: void(0);" id="fecha" class="Link"><b>[FECHAR]</b></a></p>
<div id="divMostra" style="display:none; padding-top:10px;">

Testa ai se seria isso...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo:

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

 

<style>

p { margin: 0; }

.spoiler-area {

border: 1px solid #000;

padding: 10px;

height: auto;

}

.spoiler-area.is-closed { height: 0; overflow: hidden; padding: 10px 0 0; }

</style>

</head>

<body>

 

<strong>Spoiler</strong> <button data-target="spoiler1" class="btn-spoiler">Show</button>

<div id="spoiler1" class="spoiler-area is-closed">

<p>Mensagem aqui</p>

</div><!-- .spoiler-area -->

 

<script>

(function(){

"use strict";

var $btns = document.querySelectorAll('.btn-spoiler');

function loop($els, cb) {

var i = $els.length;

while(i--) {

cb($els);

}

}

loop($btns, function($btn){

$btn.addEventListener("click", function(){

var $spoiler = document.getElementById(this.getAttribute("data-target"));

if( this.innerHTML === "Show" ){

this.innerHTML = "Hide";

$spoiler.classList.remove("is-closed");

} else {

this.innerHTML = "Show";

$spoiler.classList.add("is-closed");

}

});

 

});

 

}());

</script>

</body>

</html>

note q toda a mágica fica no css.

Compartilhar este post

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

Informação importante

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

  Aceito