JSFiddle - React, Tailwind, and code Playground

HTML

<a class="button" href="">Click Here</a>
<div id="expander">
    <h1>Hello</h1>
</div>


<h1>I should Not Be Able To see the content below</h1>
<p>jdshljfjldsahfljsadhfjlsadhkfjhsadkjfhsadkjfh</p>
<p>jdshljfjldsahfljsadhfjlsadhkfjhsadkjfhsadkjfh</p>
<p>jdshljfjldsahfljsadhfjlsadhkfjhsadkjfhsadkjfh</p>
<p>jdshljfjldsahfljsadhfjlsadhkfjhsadkjfhsadkjfh</p>
<p>jdshljfjldsahfljsadhfjlsadhkfjhsadkjfhsadkjfh</p>
<p>jdshljfjldsahfljsadhfjlsadhkfjhsadkjfhsadkjfh</p>
<p>jdshljfjldsahfljsadhfjlsadhkfjhsadkjfhsadkjfh</p>
<p>jdshljfjldsahfljsadhfjlsadhkfjhsadkjfhsadkjfh</p>
<p>jdshljfjldsahfljsadhfjlsadhkfjhsadkjfhsadkjfh</p>

CSS

#expander{
    border: solid red 1px;
    display: none;
    height: 1000px;
}

JavaScript

$('.button').click(function(e){
      e.preventDefault();
      $('#expander').slideToggle();
     $('html, body').animate({ scrollTop: $('#expander').height() }, 1000);
    });