JSFiddle - React, Tailwind, and code Playground

by Rick Su

HTML

<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-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 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>

JavaScript

function insertData(id, data){
    // locate next 'div' and insert before it
    var found = $("li:has(a[href='" + id + "']) ~ li a").get().some(function(elm, idx) {
        var nextDiv = $($(elm).attr('href'));
        return nextDiv.length && nextDiv.before(data);
    });
    
    // if not found, append to .test
    if(!found)
        $(".test").append(data);
    
}

jQuery(function($) {
    $('.slide-item').on('click', function(){
        var self = $(this),
            id = self.attr('href'),
            target = id.substring(1);
        
        if($(id).length) {
            console.log('loaded');
        } else {
            
            // use jsFiddle ajax api call to return dummy HTML
            $.post("/echo/html/", { html : '<div id="'+target+'">'+target+'</div>'}, function(data) {
                insertData(id, data);
            });
            
            // uncomment the following for your actual ajax request
            /*
            $.get("pages/"+target+".html", function(data){
                insertData(id, data);
            });
            */

        }
        return false;
    });
});