Como faço pra mostrar uma div quando clico sobre um link e voltar a esconder quando clico sobre o mesmo link?
2 Respostas
Dá uma classe a essa div e usa o classList.toggle
no elemento em questão.
Dá uma olhada a este exemplo:
var div = document.getElementById('minhaDiv');
var linkA = document.getElementById('linkA');
var linkB = document.getElementById('linkB');
linkA.addEventListener('click', function () {
div.classList.toggle('display');
});
linkB.addEventListener('click', function () {
div.classList.toggle('transicao');
});
* {
float: left;
clear: both;
padding: 20px;
}
.display {
display: none;
}
#minhaDiv {
transition: opacity 1s;
}
.transicao {
opacity: 0;
}
<a href="#" id="linkA">Clica aqui para esconder sem fade (link A)</a>
<a href="#" id="linkB">Clica aqui para esconder con fade (link B)</a>
<div id="minhaDiv">Teste teste teste...</div>
Podes fazer isso com display
(exemplo link A) ou com opacity
(exemplo link B), há diferenças entre as duas.
Dá uma olhada aqui para ler mais sobre as diferenças: https://pt.stackoverflow.com/a/44684/129
Com jQuery:
(caso precises mesmo... neste caso quanto menos jQuery melhor.)
usando .toggle()
O .toggle()
mostra e esconde sem classes de CSS. Usa o display: none
e block
jsFiddle: http://jsfiddle.net/a5mfrn7s/2/
usando toggleclass()
O toggleclass()
adiciona e remove classes, como no exemplo em cima de JavaScript puro com classes de CSS (e melhor prática que o toggle()
).
jsFiddle: http://jsfiddle.net/a5mfrn7s/1/
-
1
HTML
<a href="javascript:;" class="expander">Link</a>
<div id="minhaDiv">Div que aparece e some</div>
JavaScript (slideToggle)
$(function () {
$('.expander').live('click', function () {
$('#minhaDiv').slideToggle();
});
});