JSFiddle - React, Tailwind, and code Playground

HTML

LOLZOR

<div class="toaster">
    <div class="toaster-toggle">
        toggle me
    </div>
    <p>prout</p>
    <p>prout</p>
    <p>prout</p>
</div>

CSS

.toaster{
	
    -webkit-transition: all 2000ms ease;
	-moz-transition: all 2000ms ease;
	-o-transition: all 2000ms ease;
	-ms-transition: all 2000ms ease;
	transition: all 2000ms ease;
    
    background: rgba(230,230,230,1);
    position:fixed;
    width:100%;
    height:100%;
    max-height:20px;
    bottom:0px;
}
.toaster.open{
    max-height:100%;
}
.toaster>.toaster-toggle{
    background: rgba(210,210,210,1);
    text-align:center;
    max-height:20px;
}

JavaScript

$('.toaster-toggle').on('click',function(){
    $(this).parents('.toaster').toggleClass('open');
});
/* meme pas sur que ca marche */
$('.toaster-toggle').on('touchstart',function(){
    $(this).one('touchmove',function(){    
        $(this).parents('.toaster').toggleClass('open');
    });
});