JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

HTML

<div id="page1" class="page">
    this is page one
    <p><a href="#page2" data-change-page="true">Go to page 2</a></p>
</div>

<div id="page2" class="page">
    this is page two
    <p><a href="#page1" data-change-page="true">Go to page 1</a></p>
</div>

CSS

.page {
    display:none;
    height:400px;
    padding:8px;
    border:1px solid red;
    position:relative;
    top:-10px
}

/* show the first page by default */
.page:first-of-type {
    top:0;
    display:block;
}

JavaScript

(function() {
    var pages = $('.page');
    var props = {
        show: { opacity:'show', top:0 },
        hide: { opacity:'hide', top:-100 }
    };
    
    function toggle( pages, type ){
        return pages.animate( props[type], 'fast').promise();
    }

    function changePage(page) {
        $.when(toggle(pages.not(page), "hide"))
            .then(function() {
                toggle(page, "show");
            });
    }

    pages.delegate('a', 'click', function(event) {
        this.getAttribute("data-change-page") && changePage($(this.hash));
        event.preventDefault();
    });
})();