title: Making a div slowly slide down not working with jquery
body: <p>basically here I am trying to make a div slowly slide down upon clicking a link. By, default, the div (see below) is hidden by setting display property to none. Upon the click the div becomes visible (display->block) and slowly slides down. With the following js code, the div simply shows up, without any slidedown movement. You may consider this as trivial but your feedback will very helpful to me. Thank you.</p>
  
  <pre><code>&lt;div class="js-app-container" id="subscription_popup" style="padding-top: 70px; display: none;"&gt;
  // contents inside the divs
  &lt;/div&gt;
  
  &lt;li class="menu-16246 last"&gt;
     &lt;a href="#" class="subscribe-link open_popup" onclick="displaySubscription();"&gt;Subscribe&lt;/a&gt;
  &lt;/li&gt;
  
  
  &lt;script&gt;
      function displaySubscription() {
          // $('.js-app-container').css('display', 'block').fadeIn("slow", function () {});
          var node = document.getElementById('subscription_popup');
          if (node.style.display == 'block') {
              // node.style.display = 'none';
              $('.js-app-container').css('display', 'none').fadeOut("slow", function() {});
          } else
          // node.style.display = 'block'
              $('.js-app-container').css('display', 'block').slideDown("slow", function() {});
  
      }
  &lt;/script&gt;
  </code></pre>