JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<h5>Click on the Page 1 link to mimic an ajax call</h5>
<ul id="main-menu">
    <li><a href="#page-1" class="slide-item selected">page 1</a></li>
    <li><a href="#page-2" class="slide-item">page 2</a></li>
    <li><a href="#page-3" class="slide-item">page 3</a></li>
    <li><a href="#page-4" class="slide-item">page 4</a></li>
</ul>

<div class="test">
    <div id="page-2" class="page">
        <div class="page-container">
            <h3>page 2</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque
                iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque
                iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque
                iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque
            </p>
        </div>
    </div>
</div>

<div style="display:none">
    <!-- Will be used to mimic loading from the server -->
    <div id="page-1" class="page">
        <div class="page-container">
            <h3>page 1</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque
                iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum in itaque natus rem, vero.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur deleniti eum illo itaque
                iusto officia soluta, veritatis? Ab aliquam autem cum doloribus eaque eum...

CSS

.test {
    background: #eee;
}

JavaScript

function sortNodes(nodes, compare) {
    if(nodes instanceof jQuery) nodes = nodes.get();
    nodes.sort(compare);
    $.each(nodes, function(i, node) {
        node.parentNode.appendChild(node);
    });
}

$('[href="#page-1"]').click(function(ev) {
    ev.preventDefault();
    var $test = jQuery('.test'),
        data = $('#page-1').html();
    
    $test.append( data );
    sortNodes( $test.children(), function(a, b) {
        return a.id > b.id;
    });
});