title: How to show a div thats hidden by css on button click
body: <p>I'm pretty new to Jquery and i want to have a hidden div <code>css: display:none</code> and once a button has been clicked the <code>$(..).slideDown</code> will execute and the div will show its conents. I try'd this.</p>
  
  <pre><code>&lt;style&gt; .hidden-div{ display:none } &lt;/style&gt;
  
  &lt;div class="hidden-div"&gt; You can't see me &lt;/div&gt;
  
  &lt;button onclick="show-div()"&gt; Show Above Div &lt;/button&gt;
  
  
  &lt;script&gt;
  
      function show-div(){
  
          $('.hidden-div').slideDown('fast');
          // more stuff...
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This dont really slide it down properly as it overlaps everything else ? Also i try'd just setting the <code>class="hidden-div"</code> to <code>class="display-div"</code> but then the slideDown animation cannot be executed. </p>
  
  <p>Now i could say <code>$('hidden-div').hide()</code> just after the div and remove the css altogether but it creates this problem where i see the div and then it gets hidden, its only 0.5sec thing at the start of the page load but its look bad. </p>
  
  <p>So anyone know a solution?</p>
  
  <hr>
  
  <p><strong>Found a solution to my own problem..</strong>
  <code></p>
  
  <pre><code>//rehide the div, not sure why, but it works.
  $('.hidden-div').hide(); 
  
  
  //change class so it no longer display:none 
  //but it will not show the div as .hide() was execute above.
  $('.hidden-div').attr('class','showing-div'); 
  
  
  //Slide it down and everything works.
  $('.hidden-div').slideDown('fast');
  
  
  
  //this can be done in 1 liner. (thank you, Mohsen for chaining explanation)
  $('.hidden-div').hide().attr('class','showing-div').slideDown('fast');
  </code></pre>
  
  <p></code></p>
  
  <p>Hope this is helpful for someone else.</p>