2

Como faço pra mostrar uma div quando clico sobre um link e voltar a esconder quando clico sobre o mesmo link?

2
  • Use .toggle().
    – falsarella
    Commented 29/06/2015 às 21:29
  • muito bom me ajudou bastante cara
    – matheus
    Commented 29/06/2015 às 21:43

2 Respostas 2

4

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
  • 1
    valeu cara muito obrigado
    – matheus
    Commented 29/06/2015 às 21:42
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();
    });
});

JSFIDDLE

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .