JSFiddle - React, Tailwind, and code Playground

by Marc

HTML

<div class="reference">
    <a id="activator-bureau" class="activator">bureau</a>
	<a id="activator-werkwijze" class="activator">werkwijze</a>
</div>

<div id="overlay-werkwijze"></div>
<div id="overlay-bureau"></div>

<div class="box" id="box-bureau">
	<a class="boxclose" id="boxclose-bureau">x</a>
    <div class="slidewrap">Some info...</div> 
</div>

<div class="box" id="box-werkwijze">
	<a class="boxclose" id="boxclose-werkwijze">x</a>
	<div class="slidewrap">Some info 2...</div>          
</div>

CSS

.reference { 
    position:fixed; 
    top: 0; 
    width:100%; 
    background-color:#333; 
    color:#f00; 
    height: 24px; 
    padding: 5px; 
}

.box{
    background-color:#000; 
    color:#fff; 
    left: 0;
    margin-left: 0;
    min-height: 450px;
    position:fixed; 
    bottom:-600px; 
    width: 100%;
    z-index: 101;
}

a.activator {
    cursor: pointer;
}

a:hover{color:#3cc;}

a.boxclose {
    border: 0 solid #FFFFFF;
    cursor: pointer;
    float: right;
    height: 36px;
    margin-right: 0;
    margin-top: 0;
    width: 36px;
}

.slidewrap{padding:20px;}

JavaScript

$(function() {
        $('#activator-bureau').click(function(){
            $('#overlay-bureau').fadeIn('fast',function(){
                $('#box-bureau').animate({'bottom':'0px'},800);
            });
        });
        $('#boxclose-bureau').click(function(){
            $('#box-bureau').animate({'bottom':'-600px'},800,function(){
                $('#overlay-bureau').fadeOut('fast');
            });
        });
        $('#activator-werkwijze').click(function(){
            $('#overlay-werkwijze').fadeIn('fast',function(){
                $('#box-werkwijze').animate({'bottom':'0px'},800);
            });
        });
        $('#boxclose-werkwijze').click(function(){
            $('#box-werkwijze').animate({'bottom':'-600px'},800,function(){
                $('#overlay-werkwijze').fadeOut('fast');
            });
        });
    });