JSFiddle - React, Tailwind, and code Playground

by blankasaurus

HTML

<script src="http://twixel.askronaut.com/Scripts/bootstrap/bootstrap.js"></script>
<div style="background-color:#333;"><span class="btn showmenu">toggle menu</span></div>
<div class="clearfix">
<div class="sidebar pull-left">
    <ul class="nav nav-stacked nav-pills">
        <li><a>Home</a>
        </li>
        <li><a>Stuff</a>
        </li>
        <li><a>Etc</a>
        </li>
    </ul>
</div>
<div class="content" style="float:right; width:75%;">
    <ul>
        <li>
            <img src="https://s3.amazonaws.com/twixel-dev/9468152b-f150-42a9-9e81-d28b6e4fdfb8-3.jpg"
            />
        </li>
        <li>
            <img src="https://s3.amazonaws.com/twixel-dev/3368bb77-7540-40b3-b7a0-4f5213d151a5-3.png"
            />
        </li>
        <li>
            <img src="https://s3.amazonaws.com/twixel-dev/c39f2be8-e5fe-42ee-adb9-d07156da353d-3.jpg"
            />
        </li>
        <li>
            <img src="https://s3.amazonaws.com/twixel-dev/fluffed/earthporn/16-3.jpg"
            />
        </li>
        <li>
            <img src="https://s3.amazonaws.com/twixel-dev/9d4aeeae-14b9-41a5-862d-8e734a19b96e-3.gif"
            />
        </li>
        <li>
            <img src="https://s3.amazonaws.com/twixel-dev/d0262cf8-4e24-4152-8dbb-8e01e84326da-3.jpg"
            />
        </li>
        <li>
            <img src="https://s3.amazonaws.com/twixel-dev/fluffed/earthporn/18-3.jpg"
            />
        </li>
        <li>
            <img src="https://s3.amazonaws.com/twixel-dev/fluffed/earthporn/19-3.jpg"
            />
        </li>
    </ul>
</div>
</div>

CSS

@import url('https://s3.amazonaws.com/carbutter-dev/stuff/bootstrap.css');

.content {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.sidebar {
    width:25%;
    float:left;
}
ul {
    margin:0;
    padding:0;
}
ul li {
    float:left;
    width:25%;
    margin:0;
    padding:0;
}
ul li img {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
}

JavaScript

$('.showmenu').click(function()
                     {
                         if($('.sidebar').is(':visible'))
                         {
                             $('.sidebar').fadeOut();
                             setTimeout(function()
                                        {
                             $('.content').css('width', '100%');
                                        }, 500);
                         }else
                         {
                             $('.content').css('width', '75%'); 
                             setTimeout(function()
                                        {
                                            $('.sidebar').fadeIn();
                                        }, 1001);
                         }
                     });