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').each(function(){
        $(this).click(function(){
            showHideAnimation(clickedObj);
        });
    });
}

function showHideAnimation(clickedObj)
{
    $('.activator').each(function(){
        if($(this).id == clickedObj.id) {
            $(this).fadeIn('fast',function(){
                $(this).animate({'bottom':'0px'},800);
            });
        } else {
            $(this).animate({'bottom':'-600px'},800,function(){
                $(this).fadeOut('fast');
            });
        }
    }