How To Toggle Element Visibility Without Jquery?

I'm writing an auction template for eBay, hoping that eBay would allow it. Apparently they don't because jquery has things like string.replace() etc. The code is very basic. $(docu

Solution 1:

If you can live without the fading effect, it should be pretty straightforward:

functionchangeImage() {
    var image = document.getElementById('coin1');
    image.style.display = (image.style.display == 'none') ? 'block' : 'none';
}

setInterval(changeImage, 5000);

While fading is cool and all, it's really makes the code a lot more complicated, when we not allowed to use external libraries. Basically, you will need to deal with additional timers, firing with very short intervals, changing the opacity of the target element on each callback.

If you really want fading, see "Javascript Tutorial - Simple Fade Animation".

Solution 2:

The most basic of fading, not cross-browser compatible (try in Chrome):

<divid="x"style="background-color: yellow;"><ahref="#"onclick="fade();">fade me out</a></div><scripttype="text/javascript">var val = 1.0;
    functionfade()
    {
        document.getElementById('x').style.opacity = val;
        val -= 0.1;

        if (val != 0)
        {
            setInterval(fade, 100);
        }
    }
</script>

Solution 3:

You could use classList.toggle on your element:

<style>.hidden { display: none !important; }
</style><script>functiontoggle() {
    document.getElementById('elem').classList.toggle('hidden');
  }
</script><ahref="#"onclick="toggle()">Toggle element</a><pid="elem">lorem ipsum quid modo tralala</p>

Solution 4:

I had issues with the interval approach. This is what I came up with.

functionshowHide() {
  var element = document.getElementById('hiddenDetails');
  element.classList.toggle("hidden");
}

.hidden {
  display: none;
}

.show {
  display: block;
}

<ahref="#"onclick="showHide()">Get Details</a><divid="hiddenDetails"class="hidden">What you want to show and hide</div>