Toggle Container and wrap width using jQuery

This is a tut for mybb to toggle container with cookie function using jquery

by ozancn

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
<div id="toggle-button"></div>
<div id="container">This is container content.</div>
<div class="wrap">This is wrapped content.</div>

CSS

#toggle-button {
    height: 20px;
    width: 20px;
    background: #B81A1A;
    border: 1px solid #B21F1F;
    padding: 5px;
    border-radius: 2px;
    margin-bottom:10px
}
#container {
    width: 85%;
    background: #111;
    color: #fff;
    height:50px
}
.wrap {
    background:#E04006;
    color:#fff;
    width: 85%;
    height:30px
}

JavaScript

$(document).ready(function () {
    var setWidth = $.cookie("width");
    if (typeof setWidth !== "undefined" && setWidth == 0%") {
        $('#container,.wrap').width(setWidth); // 85% width set using cookie
    } else if (typeof setWidth !== "undefined" && setWidth == "960px") {
        $('#container,.wrap').width(setWidth); // 960px,1000px(for wrap) width set using cookie
    }
    $('#toggle-button').click(function () {
        var toggleWidth = $("#container").width() == 960 ? "45%" : "960px";

        $('#container, .wrap').animate({
            width: toggleWidth
        });
        $.cookie('width', toggleWidth);
    });
});