JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<div id="content">
    <ul id="menu">
        <li><a data-content-div="interiors" href="http://google.com">Interiors</a></li>
        <li><a data-content-div="contact" href="http://google.com">Contact</a></li>
    </ul>
    <section id="interiors" data-blinds-content>
        <p>Presently a rioting noise was heard without. Starting up, the landlord cried, "That's the Grampus's crew. I seed her reported in the offing this morning; a three years' voyage, and a full ship. Hurrah, boys; now we'll have the latest news from the Feegees."</p>
        <p>A tramping of sea boots was heard in the entry; the door was flung open, and in rolled a wild set of mariners enough. Enveloped in their shaggy watch coats, and with their heads muffled in woollen comforters, all bedarned and ragged, and their beards stiff with icicles, they seemed an eruption of bears from Labrador. They had just landed from their boat, and this was the first house they entered. No wonder, then, that they made a straight wake for the whale's mouth&mdash;the bar&mdash;when the wrinkled little old Jonah, there officiating, soon poured them out brimmers all round. One complained of a bad cold in his head, upon which Jonah mixed him a pitch-like potion of gin and molasses, which he swore was a sovereign cure for all colds and catarrhs whatsoever, never mind of how long standing, or whether caught off the coast of Labrador, or on the weather side of an ice-island.</p>
        <p class="close">Close</p>
    </section>
    <section id="contact" data-blinds-content>
        <p>"If the crust is of sufficient thickness we shall come to a final stop between six and seven hundred miles beneath the earth's surface; but during the last hundred and fifty miles of our journey we shall be corpses.  Am I correct?" I asked.</p>
        <p>"Quite correct, David.  Are you frightened?"</p>
        <p>"I do not know.  It all has come so suddenly that I scarce believe that either of us realizes the real terrors of our...

CSS

#content {
    font: bold 16px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 35px;
    text-transform: uppercase;
}
#menu a {
    color: blue;
    text-decoration: none;
}
#menu a.here {
    color: green;
}
p {
    font-size: 14px;
    margin-top: 1em;
}
section[data-blinds-content] {
    display: none;
}
section.open {
    display: block;
}
section .close {
    color: red;
    cursor: pointer;
}

JavaScript

var Blinds;

$(function (){

    Blinds = {
        tabs: $('#menu li a'),
        closers: $('section[data-blinds-content] .close'),
        selectedDivID: null,
        setup: function(){
            Blinds.tabs.each(function(i, tab){
                var contentDivID = $(tab).attr('data-content-div');
                $(tab).click(function(event){
                    event.preventDefault();
                    Blinds.toggle(contentDivID);
                });
            });
            Blinds.closers.each(function(i, x){
                var parentID = $(x).parent('section').attr('id');
                $(x).click(function(event){
                    Blinds.close(parentID);
                });
            });
        },
        toggle: function(id) {
            if (id === Blinds.selectedDivID) {
                return; // if you want a click on the opened DIV's tab to close that DIV, delete this line.
                $('#' + Blinds.selectedDivID).removeClass('open'); // Otherwise delete this and the next two lines.
                $('#menu li a[data-content-div="' + Blinds.selectedDivID + '"]').removeClass('here');
                Blinds.selectedDivID = null;
            }
            else {
                if (Blinds.selectedDivID !== null) {
                    $('#menu li a[data-content-div="' + Blinds.selectedDivID + '"]').removeClass('here');
                    $('#' + Blinds.selectedDivID).removeClass('open');
                }
                $('#menu li a[data-content-div="' + id + '"]').addClass('here');
                $('#' + id).addClass('open');
                Blinds.selectedDivID = id;
            }
        },
        close: function(id) {
            $('#menu li a[data-content-div="' + id + '"]').removeClass('here');
            $('#' + id).removeClass('open');
            Blinds.selectedDivID = null;
        }
    };

    Blinds.setup();

});