JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<dl class="tabs">
    <dt><a href="#/video/assets/">Materiale</a></dt>
    <dd>
        <dl class="tabs">
            <dt><a href="#/video/assets/search/">Søg</a></dt>
            <dd><p>Søg indhold</p></dd>
            <dt><a href="#/video/assets/schedule/">Program</a></dt>
            <dd><p>Program indhold</p></dd>
        </dl>
    </dd>
    <dt><a href="#/video/status/">Status</a></dt>
    <dd>
        <dl class="tabs">
            <dt><a href="#/video/status/incoming/">Indkommende</a></dt>
            <dd><p>Indkommende indhold</p></dd>
            <dt><a href="#/video/status/outgoing/">Udgående</a></dt>
            <dd><p>Udgående indhold</p></dd>
        </dl>
    </dd>
</dl>

CSS

html, body {
    height: 100%;
}

body {
    position: relative;
    
}

.tabs {
    margin-top: 10px;
}

.tabs, .tabs dd {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.tabs > dt {
    left: 10px;
    float: left;
    position: relative;
    margin-right: 5px;
    padding: 0 5px;
    line-height: 20px;
}

.tabs > dt.selected {
    z-index: 200;
    background-color: #CCC;
}

.tabs > dd {
    top: 20px;
    display: none;
}

.tabs > dd.selected {
    z-index: 1;
    display: block;
    border-top: 1px solid #CCC;
}

JavaScript

;$$("dl.tabs").each(function (dl) {
    var selected,
        name = "selected";
    
    function select (tab) {
        if (selected) {
            selected.removeClass(name);
            if (selected.content) {
                selected.content.removeClass(name);
            }
        }
        selected = tab;
        selected.addClass(name);
        selected.content.addClass(name);
    }
    
    var tabs = dl.getChildren("dt"),
        links = $$(dl.getElements("> dt > a"));
    
     if (window.console) {
            console.log("links", links );
        }
    
    links.addEvent("click", function (e) {
        var parent = this.getParent();
        
        if (window.console) {
            console.log("click", this);
        }
        
        if (parent != selected || !parent.hasClass(name)) {
            select(parent);
        }
        
    });
    
    tabs.each(function (tab) {
        tab.content = tab.getNext("dd");
    });
    
    select(tabs[0]);
    
});