Demo of simple tabs without jQuery UI

by Nicholas Mastracchio

HTML

<script src="http://zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
        <li><a href="#tab-4">Tab 4</a></li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="tab-content">
            <div id="divId"></div>
        </div>
        <div id="tab-2" class="tab-content">
            <div id="divId2"></div>
        
        </div>
        <div id="tab-3" class="tab-content">
            <div id="divId3" style="width:100%;"></div>
        </div>
        <div id="tab-4" class="tab-content">
            <div id="divId4" style="width:100%;"></div>
        </div>
    </div>
</div>

CSS

body {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
font-size: 14px;        
}

.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 10px;
    background-color: #ccc;
    border-top: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: #2e7da3;
}

.tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    width: auto;
}

.tab-content {
    width: 660px;
    padding: 20px;
    display: none;
}

#tab-1 {
 display: block;   
}

JavaScript

//Use gload to set the width back to 100% after load for responsiveness
zingchart.gload=function(p){
        console.log(p.id);
        zingchart.exec(p.id,'resize',{
            width:'100%'
        });
    }

$(document).ready(function() {
    chartData={
        "type":"line",
        "series":[{"values":[12,13,14,15]}]
    };
    //Get the width of the parent content div
    var contentWidth=$(".tab-content").width();
    
    //Render charts using width of parent div
    zingchart.render({
        id:'divId',
        data:chartData,
        width:contentWidth,
        height:'400'
    });
    zingchart.render({
        id:'divId2',
        data:chartData,
        width:contentWidth,
        height:'400'
    });
    zingchart.render({
        id:'divId3',
        data:chartData,
        width:contentWidth,
        height:'400'
    });
    zingchart.render({
        id:'divId4',
        data:chartData,
        width:contentWidth,
        height:'400'
    });
    
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});