JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<h1>Experiment</h1>
<div class="content">
    <div class="content-area">
        <div class="menu-column">
            <a href="#" class="close">Skrýt</a>
            <h3>Všechny kampaně</h3>
        </div>
        <div class="content-column">
            <a href="#" class="open">Otevřít</a>
            Content
        </div>
    </div>
</div>
<div class="footer">
<h3>Footer</h3>
</div>

CSS

.content-area{
    position: relative;
    width: 100%;
    background: gray;
}

.menu-column, 
.content-column{
    position: absolute;
}
.menu-column{
    background: red;
    width: 30%;
    z-index: 100;
}
.menu-column .close{
//    display: none;
}
.js .menu-column .close{
    display: inline-block;
}
.content-column{
    background: green;
    width: 70%;
    left: 30%;
    z-index: 200;
    
    /* Pouze pokud je dosupne transition */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.content-column .open{
    display: none;
}
.content-column.open{
    width: 100%;
    left: 0;
}
.content-column.open .open{
    display: inline-block;
}
.menu-column.closed .close{
    display: none;
}

JavaScript

$(document).ready(function(){
    $('.menu-column .close').click(function(){
        $('.menu-column').addClass('closed');
        $('.content-column').addClass('open');
        return false;
    });
    $('.content-column .open').click(function(){
        $('.menu-column').removeClass('closed');
        $('.content-column').removeClass('open');
        return false;
    });
});