title: CSS transition on hidden div
body: <p>I have a div that displays and hides on a jquery click function and I want to add css transition on the div. This is done by adding and a remove a class .hidden and .visible, here is the jquery code:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  
              $(document).ready(function(){
  
                  $("#search-icon").on( "click", function() {
  
                  if ($("#display-search").hasClass("hidden")) {
                      $("#display-search").removeClass("hidden").addClass("visible");
                  }
                   else {
                      $("#display-search").removeClass("visible").addClass("hidden");
                  }
  
                  });
  
              });
      &lt;/script&gt; 
  </code></pre>
  
  <p>and the css for .hidden .visible:</p>
  
  <pre><code>.hidden {
    opacity: 0;
    -webkit-transition:  height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    transition: height 0.5s ease;
    transition-delay:0.2s;}
  
  .visible {
    opacity: 1;
    -webkit-transition:  height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    transition: height 0.5s ease;
    transition-delay:0.2s;}
  </code></pre>
  
  <p>Does anyone have any ideas for how I can get the transition to work and what I am doing wrong? Do I need to add a height/max-height to the classes? I also tried adding the transition to the div #display-search but that also had no effect. </p>