JSFiddle - React, Tailwind, and code Playground

by alpacalips

HTML

<div class="linkbar">
    <ul id="nav">
        <li><a href="#" rel="page-one">Page One</a></li>
        <li><a href="#" rel="page-two">Page Two</a></li>
        <li><a href="#" rel="page-three">Page Three</a></li>
        <li><a href="#" rel="page-four">Page Four</a></li>
    </ul>
</div>
<div class="pageWrapper">
    <div class="page-one pages">One</div>
    <div class="page-two pages">Two</div>
    <div class="page-three pages">Three</div>
    <div class="page-four pages">Four</div>
</div>
<div class="footer"></div>

CSS

.pages {
    display: none;
}

JavaScript

$(function() {
    $('#nav li a').click(function() {
        var page = $(this).attr('rel'); // grab rel attribute
        $('.pages').each(function() { // iterate
            if ($(this).is(':visible')) {  // returs true if visible
                $(this).hide();
            }
        });
        $('.' + page).stop(true, true).toggle('slow'); // show page
    });
    return false;
});