PANEL TOGGLE - #1

by bizamajig

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/css/semantic.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/javascript/semantic.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="ui full-height grid">
    <div class="full-height row">
        <div id="navDiv" class="four wide full-height column" style="background-color:navy; color:white;">
            <div id="nav-tab-items" class="row">
                <div class="nav-tab-frame column">
                    <div class="ui active tab nav-tab-content" data-tab="home"> <a href="#" id="toggle" style="color:white;">toggle</a>

                    </div>
                    <div class="ui tab nav-tab-content" data-tab="info">Second Tab</div>
                    <div class="ui tab nav-tab-content" data-tab="third">Third Tab</div>
                </div>
            </div>
            <div id="nav-tab-control" class="bottom aligned row">
                <div class="ui pointing secondary menu drawer" style="margin-bottom:0rem;"> <a class="active red item" data-tab="home">tab 1</a>
 <a class="blue item" data-tab="info">tab 2</a>
 <a class="green item" data-tab="third">tab 3</a>

                </div>
            </div>
        </div>
        <div class="eight wide full-height column">[Content Goes Here]</div>
    </div>
</div>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
.full-height {
    height:100%;
}
#nav-tab-control {
    position:absolute;
    bottom:0;
    left: 0;
    width: 100%;
    text-align: center;
}
#nav-tab-items {
    height:80%;
    margin:0rem;
    padding:0rem;
}
.ui.pointing.secondary.menu.drawer {
    display: inline-block;
}
#navDiv {
    position: relative;
}

JavaScript

$(document).ready(function () {
    $('.drawer .item').tab({
        history: false
    });
});


var w = $('#navDiv').outerWidth();

function toggleNav() {
    if ($('#navDiv').width() > 56) {
        $('#navDiv').animate({
            width: 56
        }, 500);
    } else {
        $('#navDiv').animate({
            width: w
        }, 500);
    }
}
$('#toggle').click(toggleNav);