JSFiddle - React, Tailwind, and code Playground

by inser

HTML

<div id="myFeature">
<ul>
    <li>test</li>
    <li>test</li>
</ul>
</div>

JavaScript

var myFeature = {
    config : {
        wrapper : '#myFeature',
        container : 'div',
        urlBase : '/echo/json/'
    },
    
    init : function(config) {
        $.extend(myFeature.config, config);
        
        $(myFeature.config.wrapper).find('li').
            each(function() {
                myFeature.getContent($(this));
            }).
            click(function() {
                myFeature.showContent($(this));
            });
    },
    
    buildUrl : function($li) {
        return myFeature.config.urlBase; // + $li.attr('id');
    },
    
    getContent : function($li) {
        var elem = $('<' + myFeature.config.container + '/>');
        $li.append(elem);
        var url = myFeature.buildUrl($li);
        $li.find(myFeature.config.container).load(url);
        myFeature.hideContent($li.siblings());
    },
    
    showContent : function($li) {
        $li.find('div').show();
        myFeature.hideContent($li.siblings());
    },
    
    hideContent : function($elements) {
        $elements.find('div').hide();
    }
};

$(document).ready(function() { myFeature.init(); });