Show hide div with animation

Question

I made this script, which opens a div with the right class and close the others.

function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        var divs = document.getElementsByClassName("hideable");
        for (var i = 0; i < divs.length; i = i + 1) {
            divs[i].style.display = "none";
        }
        divid.style.display = "block";
    }
    return false;
}

Is it possible to make some animation, like fadout, easeout instead of just showing it by display options?

Answer 1

You could try this

function showhide(id) {
  if (document.getElementById) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName("hideable");
    for (var i = 0; i < divs.length; i = i + 1) {
      $(divs[i]).fadeOut("slow");
    }
    $(divid).fadeIn("slow");
  }
  return false;
}

Have a look at this fiddle "http://jsfiddle.net/9jtd3/"

There are many more techniques provided by Jquery library, You should have a look at that too.