title: Show div on click and scroll down to it
body: <p>I want to create a div that when clicked on, pops open another div and scrolls down to it.
  <a href="http://jsfiddle.net/kq9G8/743/" rel="nofollow">Here</a>'s my take on it but it is not working. What is the correct way?</p>
  
  <p><code>html</code></p>
  
  <pre><code>&lt;div class="image"&gt;
  &lt;img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c-  0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800"&gt;
  &lt;/div&gt;
  &lt;div id="box" style="display:none;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><code>jquery</code></p>
  
  <pre><code>    $(document).ready(function() {
      $('.image').click(function() {
      $('#box').slideToggle("fast");
  
      $('html, body').animate({
       scrollTop: $('#box').offset().top
       }, 2000);
       });
  
  });
  </code></pre>