JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://patrickorr.ca/wp-content/themes/po/style.css">
<body class="home blog">
    <div id="wrapper">
        <div id="fakeSpacer"><!-- added for fiddle --></div>
        <div id="ftr">
            <hr />
            <div id="ftrconnect" class="ftropen">
                <a href="target" class="anchorLink"></a>
            </div>
            <div id="ftrhide" class="ftrclose">
                <a href="home" class="anchorLink"></a>
            </div>
            <div id="connect" style="height:0px; display:block;"><a style="display:block;margin-top:500px;height:100px;" id="target" name="target">f</a></div>
        </div>
    </div>
</body>

CSS

#fakeSpacer {
    height:700px;
}

JavaScript

$('div.ftropen').click(function(event) {
    $('div#connect').animate({
        height: '500px'
    }, 'fast', function() {
        $('html,body').animate({
            scrollTop: $('#connect').position().top + $('#connect').height()
        }, 700);
    });
    $('div#ftrconnect').fadeOut('fast'); //hide connectbtn
    $('div#ftrhide').fadeIn('fast'); //show hidebtn
    event.stopPropagation();
    return false;
});
$('div.ftrclose').click(function() {
    $('div#connect').animate({
        height: '0px'
    }, 'fast');
    $('div#ftrhide').fadeOut('fast'); //hide hidebtn
    $('div#ftrconnect').fadeIn('fast'); //show connectbtn
    return false;
});