Não sei nada de Javascript. Portanto mesmo sendo algo "simples" pra alguns pra mim é um bicho de sete cabeça. É o seguinte:
No código a seguir tem um script que eu vou usar que esconde e mostra a div ao clicar no button
, só que nesse script ai mesmo que eu clique mil vezes no button
o valor dentro dele não muda!
function Mudarestado(el) {
var display = document.getElementById(el).style.display;
if(display == "none")
document.getElementById(el).style.display = 'block';
else
document.getElementById(el).style.display = 'none';
}
<div id="minhaDiv">Conteudo</div>
<button type="button" onclick="Mudarestado('minhaDiv')">Mostrar / Esconder</button>
Eis então o que eu queria fazer! Gostaria que quando a div
estivesse escondida o texto mostrado no button
fosse "mostrar", e quando a div
estivesse a mostra eu gostaria que mostrasse "esconder".
Ainda melhorando o script, gostaria que tivesse um efeito fade.
Se possível gostaria que isso fosse feito em javascript puro, porque não uso Jquery no meu projeto, então acho inconveniente colocar um arquivo de 100kb só por causa de algo relativamente "simples"
fade
em JS puro está suficientemente dissociado a ponto de merecer uma pergunta separada. Nesse link há uma técnica interessante, porém limitada (ele não colocadisplay:none
no final). Buscando pelo assunto, há outras possibilidades, mas de todo modo é uma tarefa de razoável complexidade... (primeiro se animaopacity
e só no final esconde - não dá pra animar "visibilidade")