JSFiddle - React, Tailwind, and code Playground

by coiscir

HTML

<div id="subLinks"></div>
<div id="programContent"></div>

CSS

span { margin-right: 5pt; }

JavaScript

// http://stackoverflow.com/q/16128050/15031

function addSubLink(text, name, content) {
// append programLink span to subLinks:
    var span = document.createElement('span');
    span.className = 'programLink';
    span.id = name;
    span.appendChild(document.createTextNode(text));
    
    document.getElementById('subLinks').appendChild(span);
    
// load program content onclick:
    span.onclick = function () {
        // set value of programContent to content's value
        document.getElementById("programContent").innerHTML = content;
    }
}

var whatContent = "<p>A website!</p>";
var whyContent = "<p>Recreation!</p>";
var howContent = "<p>Kludges.</p>";
addSubLink("WHAT", "whatLink", whatContent);
addSubLink("WHY", "whyLink", whyContent);
addSubLink("HOW", "howLink", howContent);