title: CSS based div sliding up and down - Can not appear or disappear and work
body: <p>I found an awesome solution on these forums
  <a href="https://stackoverflow.com/questions/8101284/how-to-create-sliding-div-on-click">How to create sliding DIV on click?</a>
  However what I wanted was to have the content appear and disappear at a click of the button. Following is my code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;CSS - Slider Test&lt;/title&gt;
          &lt;style type="text/css"&gt;
              .slide {
                  /*visibility:hidden;*/
                  border: 1px solid black;
                  height: 0px;
                  width:400px;
                  overflow:hidden;
                  transition:             height 500ms ease;
                      -moz-transition:    height 500ms ease;
                      -ms-transition:     height 500ms ease;
                      -o-transition:      height 500ms ease;
                      -webkit-transition: height 500ms ease;
              }
  
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;
              function slider(){
                  var obj = document.getElementById('slide');//
                   //obj.style.visibility= (obj.style.visibility=='hidden')?'visible':'hidden';
                  obj.style.height = ( obj.style.height == '0px' || obj.style.height == '' ) ?  '150px'  :  '0px';
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;input type="button" onclick="slider();" value="Click"/&gt;
  
      &lt;div id="slide" class="slide"&gt;
          &lt;table&gt;
  
              &lt;tr&gt;
                  &lt;th colspan="2" align="center"&gt;
                      Formats
                  &lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="width:140px;"&gt;&lt;span id="lblCountry"&gt;Culture&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name="cultureList" id="cultureList"&gt;
                          &lt;option selected="selected" value="1033"&gt;English (United States)&lt;/option&gt;
                          &lt;option value="2057"&gt;English (United Kingdom)&lt;/option&gt;
                          &lt;option value="3084"&gt;French (Canada)&lt;/option&gt;
                          &lt;option value="4105"&gt;English (Canada)&lt;/option&gt;
  
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;span id="lblNumber"&gt;Number&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input name="number" type="text" value="123,456,789.00" id="number" style="width:120px;" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;span id="lblCurrency"&gt;Currency&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input name="curr" type="text" value="$123,456,789.00" id="curr" style="width:120px;" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
  
          &lt;/table&gt;
  
  
      &lt;/div&gt;
       &lt;div&gt;
              Some other content
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Now the above code works on click as intended. What I am failing to achieve is to set its visibility to none by default and when I click on button, first its visibility is changed to visible and then the animation happens and on second click it disappears as well after the animation is completed..Can some one pls guide?
  Thanks</p>