JSFiddle - React, Tailwind, and code Playground

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

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

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

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

<div class="box" id="activator-contact-box">
	<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

$('.reference a').click(function(){
    //get ID of clicked button and appends -box to it so it matches the box id
	var boxId= $(this).attr('ID')+"-box";
    //get ID of clicked button and appends -overlay to it so it matches the overlay id
    var overlayId= $(this).attr('ID')+"-overlay";
    
    //animates all items with box class to -600px and fades out all items with overlay class
    $('.box').animate({'bottom':'-600px'},function(){
      			//closes all items with overlay class
                $('.overlay').fadeOut('fast');
            });
    
    //tells the current overlay to fade in
    $('#'+overlayId).fadeIn('fast',function(){
        		//animates current box bottom position to 0
               $('#'+boxId).animate({'bottom':'0px'});
            });

});

//tells all items with boxclose class to animate its parents bottom to -600
$('.boxclose').click(function(){
    $(this).parent().animate({'bottom':'-600px'});
})