JSFiddle - React, Tailwind, and code Playground

by taginspector

HTML

<div id="footer">

    <div id="footer_content">

        <div class="footbox">

                footer box 1

        </div>

        <div class="footbox">

                footer box 2

        </div>

        <div class="footbox">

                footer box 3

        </div>

        <div class="clear"></div>

    </div>

</div>

CSS

#footerr {

    background:#1A1A1A;

    width: 100%;

    font-size:10px;

    color:#BCBCBC;

}

    #footer #footer_content {

        width: 980px;

        margin: 0px auto;

        display: none;

    }

    #footer #footer_content .footbox {

        background: #1F1F1F;

        width: 265px;

        padding: 15px 20px 20px 20px;

        margin: 20px 10px 20px 10px;

        float: left;

    }

JavaScript

jQuery(function($) {

    var slide = false;

    var height = $('#footer_content').height();

    $('#footer_button').click(function() {

        var docHeight = $(document).height();

        var windowHeight = $(window).height();

        var scrollPos = docHeight - windowHeight + height;

        $('#footer_content').animate({ height: "toggle"}, 1000);

        if(slide == false) {

            if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.

                $('html').animate({scrollTop: scrollPos+'px'}, 1000);

            } else {

                $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);

            }

                            slide = true;

        } else {

                            slide = false;

                    }

    });

});