Question:

I'm using this function to open and close elements onclick. How can I add some fade effect without using jQuery?

function toggle_visibility(){ for(var i = 0,len = arguments.length;i < len;i++){ var e = document.getElementById(arguments[i]).style,d = e.display; e.display = (d == "block") ? "none" : "block"; } }

You can use css3 transition and opacity to do this

#block { transition: opacity 1s ease-in-out; } .out { opacity: 0; } .in { opacity: 1; }

then use out or in class to hide or show the element

You can write your own function like this:

var toggleFade = function(element, time, callback) { var timeStep = 50; var step = timeStep / time; var toValue = 1; if (element.style.display != 'none') { step = -step; toValue = 0; element.style.opacity = element.style.opacity || 1; } else { element.style.opacity = element.style.opacity || 0; element.style.display = 'block'; } var interval = setInterval(function() { var newVal = +element.style.opacity + step; if (newVal < 0 && step < 0) { clearInterval(interval); element.style.opacity = 0; element.style.display = 'none' callback && callback(); } else if (newVal > 1 && step > 0) { clearInterval(interval); element.style.opacity = 1; callback && callback(); } else element.style.opacity = newVal; }, timeStep); }

<a href="http://jsfiddle.net/WXcnc/1/" rel="nofollow"><strong>Demo</strong></a>