JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<article class="tabs">

    <section>
        <h3>Hello</h3>
        <div>World</div>
    </section>
    
    <section>
        <h3>Foo</h3>
        <div>Bar</div>
    </section>
    
    <section>
        <h3>Axis</h3>
        <div>OF EVIL!</div>
    </section>

</article>

CSS

body {
    font: 12px/120% Arial, Verdana, sans serif;
}

.tabs {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border: 2px solid red;
}

.tabs > section {
    float: left;
}

.tabs > section > h3 {
    background-color: #DDD;
    border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    -webkit-border-radius: 2px 2px 0 0;
    padding: 0 7px;
    line-height: 25px;
    margin-right: 1px;
}


.tabs > section > div {
    background-color: #EEE;
    position: relative;
    left: 0;
    width: 100%;
    display: none;
}

.tabs > .selected > h3 {
    background-color: #EEE;
}

.tabs > .selected > div {
    display: block;
}

JavaScript

$$('article.tabs').each(function(container){

    var tabs = container.getElements('section > h3'),
        selected = container.getChildren()[0].addClass('selected');
  
    tabs.addEvent('click', function(event){
        var parent = event.target.getParent();
        if (parent!=selected) {
            selected.removeClass('selected');
            selected = parent.addClass('selected');
        }
    });
    
});