JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<a class="fixed hidden" href="#" ><i class="fa fa-dedent" style="margin-top: 12px;"></i></a>
<a class="fluid" href="#" ><i class="fa fa-indent" style="margin-top: 12px;"></i></a>

<div id="container"></div>

CSS

.fixed, .fluid {
background: none;
font-size: 16px;
list-style: none;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0px 10px;
border-left: 1px solid #F7F7F7;
border-right: 1px solid #DADADA;
}

#container {
    background: #2b2b2b;
    width: 960px;
    height:50px;
}

.hidden {
    display:none;
}

JavaScript

jQuery(document).ready(function ($) {
    var setWidth = $.cookie("width");
    if (typeof setWidth !== "undefined" && setWidth == "90%") {
        $('#container,.wrap').width(setWidth); // 90% width set using cookie
    } else if (typeof setWidth !== "undefined" && setWidth == "960px") {
        $('#container,.wrap').width(setWidth); // 960px,1000px(for wrp) width set using cookie
    }
    $('.fixed').click(function () {
        var toggleWidth = "960px";
        $('#container, .wrap').animate({
            width: toggleWidth
        });
        $.cookie('width', toggleWidth);
        $(this).addClass("hidden");
        $('.fluid').removeClass("hidden");
    });
    $('.fluid').click(function () {
        var toggleWidth = "90%";
        $('#container, .wrap').animate({
            width: toggleWidth
        });
        $.cookie('width', toggleWidth);
         $(this).addClass("hidden");
        $('.fixed').removeClass("hidden");
    });
});