Toggle Menu and Position

by mslilafowler

HTML

<div class="main-wrap">
    <input id="slide-sidebar" type="checkbox" role="button" />
    <label id="toggle" for="slide-sidebar"><span>close</span></label>
    <div id="menu" class="sidebar"><h1>Settings</h1></div>
    <div class="portfolio"><h3>Portfolio</h3></div>

</div>

CSS

.sidebar {
    width: 150px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: green;
}
.portfolio {
    background-color: red;
    position: absolute;
    top: 0;
    left: 150px;
    right: 0;
    bottom: 0;   
}

input[type=checkbox] {
   display: none;
}
label {
    z-index: 10000;
    position: absolute;
    top: 0em;
    left: 0em;
    background-color: blue;
    
}

JavaScript

$(document).ready( function(){
    $('#toggle').click( function() {
        var toggleWidth = $("#menu").width() == 0 ? "150px" : "0px";
        var togglePosition = $(".portfolio").css("left") == 0 ? "150px" : "0px";
        $('#menu').css({ width: toggleWidth });
        $('.portfolio').css({ left: togglePosition });
    });
});