Show div on click and scroll down to it

Question

I want to create a div that when clicked on, pops open another div and scrolls down to it. Here 's my take on it but it is not working. What is the correct way?

html

<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c-  0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;"></div>

jquery

    $(document).ready(function() {
    $('.image').click(function() {
    $('#box').slideToggle("fast");

    $('html, body').animate({
     scrollTop: $('#box').offset().top
     }, 2000);
     });

});

Answer 1

Try scrollIntoView()

  $(document).ready(function() { $('.image').click(function() { $("#box").show() $('#box').get(0).scrollIntoView() }); }); 

 #box{background-color:#000;height:100px;display:block;width:100%;} .mage{display:block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="image"> <img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c-0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800"> </div> <div id="box" style="display:none;"> </div> 

Answer 2

You need to remove display:none inline css and add display:none to external css of #box div. here is the updated fiddle

<div id="box">
</div>

#box{background-color:#000;height:100px;display:none;width:100%;}