JSFiddle - React, Tailwind, and code Playground

HTML

<div class="itemWerk" id="werkEen">



</div>

CSS

.itemWerk {
width: 10em;
height: 16em;
background: #000;
float: left;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}

#werkEen {
position: absolute;
top: 2em;
left: 2em;
}

.itemWerk.toggle {
    
}

JavaScript

$('.itemWerk').toggle(

function(){
    $.data(this, 'top', $(this).css('top'));
    $.data(this, 'left', $(this).css('left'));

    $(this)
        .animate({'z-index':'10'}, { duration: 0, queue: false })
        .animate({'left':'0.5em'}, { duration: 400, queue: false })
        .animate({'top':'0.5em'}, { duration: 400, queue: false })
        .animate({'width':'74em'}, { duration: 400, queue: false })
        .animate({'height': '38em'}, { duration: 400, queue: false });


    $("#achtergrondWerk")
        .animate({'height':'38em'},{ duration: 400, queue: false }) 
;},

function(){

    $(this)
        .animate({'left':$.data(this, 'left')}, { duration: 400, queue: false })
        .animate({'top':$.data(this, 'top')}, { duration: 400, queue: false })
        .animate({'width':'10em'}, { duration: 400, queue: false })
        .animate({'height': '16em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'38em'},{ duration: 400, queue: false }) 
});