Tab Panel

<div data-ax5layout="ax1" data-config="{layout:"tab-panel"}" style="height:300px;">
    <div data-tab-panel="{label: "Live Status", active: "false"}" style="background: #ffaba1;">
        <div style="padding: 10px;">
            Live Status Tab content
        </div>
    </div>
    <div data-tab-panel="{label: "Social Network", active: "true"}" style="background: #8fcc95;">
        <div style="padding: 10px;">
            Social Network
        </div>
    </div>
    <div data-tab-panel="{label: "Social Network", active: "false"}" style="background: #82aecc;">
        <div style="padding: 10px;">
            Open Network
        </div>
    </div>
</div>

<div style="padding: 10px;">
    <button data-btn="get-active-tab" class="btn btn-primary">getActiveTab</button>
    <button data-btn="tab-open-0" class="btn btn-primary">tabOpen(0)</button>
    <button data-btn="tab-open-1" class="btn btn-primary">tabOpen(1)</button>
    <button data-btn="tab-open-2" class="btn btn-primary">tabOpen(2)</button>
</div>

<script type="text/javascript">
$(function(){
    var layout$ = $('[data-ax5layout="ax1"]');
    layout$.ax5layout();

    $('[data-btn="get-active-tab"]').click(function () {
        ax5.util.alert(layout$.ax5layout("getActiveTab"));
    });
    $('[data-btn="tab-open-0"]').click(function () {
        layout$.ax5layout("tabOpen", 0);
    });
    $('[data-btn="tab-open-1"]').click(function () {
        layout$.ax5layout("tabOpen", 1);
    });
    $('[data-btn="tab-open-2"]').click(function () {
        layout$.ax5layout("tabOpen", 2);
    });
});
</script>