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>
    <a id="activator-klanten" class="activator">klanten</a>
	<a id="activator-contact" class="activator">contact</a>
</div>

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

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

<div class="box" id="box-werkwijze">
	<a class="boxclose" id="boxclose-werkwijze">x</a>
    <div class="slidewrap">Werkwijze..RET ERW TEW</div>
</div>

<div class="box" id="box-klanten">
	<a class="boxclose" id="boxclose-klanten">x</a>
	<div class="slidewrap">klanten..TRE TRE .</div>          
</div>

<div class="box" id="box-contact">
	<a class="boxclose" id="boxclose-contact">x</a>
	<div class="slidewrap">contact..FEWQR QWTRQTRQT.</div>          
</div>

CSS

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

.box{
    background-color:#000; 
    opacity:0.4;
    filter:alpha(opacity=40);
    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);
            });
                        $('#box-werkwijze').animate({'bottom':'-600px'},800,function(){
                $('#overlay-werkwijze').fadeOut('fast');
            });
        });
        $('#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);
            });
             $('#box-bureau').animate({'bottom':'-600px'},800,function()
                     {
                $('#overlay-bureau').fadeOut('fast');
            });
        });
        $('#boxclose-werkwijze').click(function(){
            $('#box-werkwijze').animate({'bottom':'-600px'},800,function(){
                $('#overlay-werkwijze').fadeOut('fast');
            });
        });
    
        $('#activator-klanten').click(function(){
            $('#overlay-klanten').fadeIn('fast',function(){
                $('#box-klanten').animate({'bottom':'0px'},800);
            });
             $('#box-bureau').animate({'bottom':'-600px'},800,function(){
                $('#overlay-bureau').fadeOut('fast');
            });
        });
        $('#boxclose-klanten').click(function(){
            $('#box-klanten').animate({'bottom':'-600px'},800,function(){
                $('#overlay-klanten').fadeOut('fast');
            });
        });
    
        $('#activator-contact').click(function(){
            $('#overlay-contact').fadeIn('fast',function(){
                $('#box-contact').animate({'bottom':'0px'},800);
            });
            ...