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

This example will toggle multiple elements with the same class name. This example does not need jquery.

HTML:

<button onclick="fadeInAndOut(this)" style="width:100%">Toggle 1</button>
<div class="accordianPanel acordianPanelHidden accordianPanelStyle">Panel 1</div>

<button onclick="fadeInAndOut(this)" style="width:100%">Toggle 2</button>
<div class="accordianPanel acordianPanelHidden accordianPanelStyle">Panel 2</div>
    

Javascript:

function fadeInAndOut(thz) {
  var elmt = thz.nextElementSibling;//Get the element that is below the button that
     //was just clicked

  elmt.classList.toggle("acordianPanelHidden");//Toggle the class which changes
    //attributes which triggers the `transition` CSS
}

CSS

.accordianPanel {
  opacity: 1;
  height:100%;
  transition: all 1s;
}

.accordianPanel.acordianPanelHidden {
  opacity: 0;
  height: 0px;
  visibility:hidden;/* This must be used or some strange things happen - 
   What happens is that even though the content of the panel is not shown 
   any buttons in the content can still be clicked -
   So basically there are invisible buttons that can accidently get clicked -
   if the visibility is not set to hidden - And the visibility doesn't need to be explicitly changed to visible
  from hidden in order to show the content
  because if visibility:hidden is not used then by default the content is 
  displayed -
 */
}

.acordianPanelShown {
  height: 100%;
  width: 100%;
  opacity: 1;
}

.accordianPanelStyle {
  background:red;
}