title: Jquery Accordion - Make content open with animation
body: <p>I have this JSfiddle: <a href="https://jsfiddle.net/07fdq3t1/5/" rel="nofollow">https://jsfiddle.net/07fdq3t1/5/</a></p>
  
  <p>It's almost perfect, except I'd like to have it to where the content is displayed in an animated fashion. Right now it just pops open, but I'd like to have it slowly open. The animation for making it go to the top of the viewport is working great, but I need it to where when someone clicks an element, the content opens up slowly.</p>
  
  <p>Any ideas?</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $('.accordion').click(function(){
          if($(this).next('.container').is(':visible')) {
              $(this).removeClass('show');
              $(this).next('.container').slideUp();
          }
          else {
              $('.accordion').find('.container:visible').slideUp();
              $('.accordion').removeClass('show');
              $(this).addClass('show');
              $(this).next('.container').slideDown();
              $('html, body').animate({
                  scrollTop: $(this).offset().top
              }, 200);
          }         
      });
  });
  &lt;/script&gt;
  
  &lt;div class="accordion"&gt;Heading&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="content"&gt;
              &lt;div&gt;Sample Content&lt;/div&gt;
              &lt;p&gt;Content here....&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;div class="accordion"&gt;Heading&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="content"&gt;
              &lt;div&gt;Sample Content&lt;/div&gt;
              &lt;p&gt;Content here....&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>