JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

header
<div class="container">
    
    
<div class="menu">
    <a href="#" class="hide-button">Skrýt</a>
    <h2>Všechny kampaně</h2>
    <ul>
        <li>Kampaň</li>
        <li>Kampaň</li>
        <li>Kampaň</li>
        <li>Kampaň</li>
        <li>Kampaň</li>
        <li>Kampaň</li>
        <li>Kampaň</li>
        <li>Kampaň</li>
        <li>Kampaň</li>
        <li>Kampaň</li>
        <li>Kampaň</li>
    </ul>
</div>
<div class="content">
    <a href="#" class="show-button">Otevřít</a>
    Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
    

</div>    footer

CSS

.container
{
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
 
.menu
{
    float: left;
    width: 30%;
    background-color: green;
    color: #fff;
    margin-bottom: -100%;
    padding-bottom: 100%;
}
 
.content
{
    float: left;
    width: 70%;
    background-color: red;
    margin-bottom: -100%;
    padding-bottom: 100%;
}
.content.opened{
    width: 100%;
    position: absolute;
}

JavaScript

$(document).ready(function(){
    $('.menu .hide-button').click(function(){
        $('.content').addClass('opened');
        return false;
    });
    $('.content .show-button').click(function(){
        $('.content').removeClass('opened');
        return false;
    });
});