9
I don’t know anything about Javascript. So even though it’s something "simple" for some people, it’s a seven-headed animal. Here’s the thing:
In the following code is a script that I will use that hides and shows the div by clicking on button
, only in this script right there I click a thousand times on button
the value within it does not change!
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>
So here’s what I wanted to do! I wish that when the div
the text shown in button
were "show", and when the div
were the show I’d like you to show "hide".
Still improving the script, I wish it had an effect fade.
If possible I would like this to be done in pure javascript, because I do not use Jquery in my project, so I find it inconvenient to put a 100kb file just because of something relatively "simple"
You asked two questions in one... I answered the main question, but add an effect
fade
in pure JS is sufficiently dissociated to deserve a separate question. At this link there is an interesting but limited technique (it does not putdisplay:none
at the end). Looking for the subject, there are other possibilities, but it is nevertheless a task of reasonable complexity... (first animatesopacity
and only at the end hides - can not animate "visibility")– mgibsonbr