JSFiddle - React, Tailwind, and code Playground

by kokoklems

HTML

<div id="dvtAssistance" class="dvtPostit" style="z-index: 200; position: fixed; top: -1px;" >
    <img style="max-height: 196px;" src="https://static.devatics.com/d170/assistance-tel2_fr.png" />
    <div class="dvtToggle" style="position: absolute; width: 227px; height: 40px; top: 142px; left: 10px; cursor: pointer;"></div>
</div>

JavaScript

$('.dvtToggle').click(function(){
    //console.debug('toggle');
    var postit = $($(this).parent().get(0));
    //console.debug(postit.attr('id'));
    if ( parseFloat(postit.css('top').replace('px','')) > -10 ) {
        console.debug('up');
        //var top_margin = -(postit.height()-$(this).height())+"px";
        //console.debug(top_margin);
        postit.animate({'top':'-135px'},1000);
        postit.find('.dvtToggleIcon').css('background-image','url(https://static.devatics.com/triangle-bottom.png)');
    } else {
        console.debug('down');
        postit.animate({'top':'-1px'},800);
        postit.find('.dvtToggleIcon').css('background-image','url(https://static.devatics.com/triangle-top.png)');
    }
});
    $('#dvtAssistance .dvtToggle').append('<div class="dvtToggleIcon" style="position: absolute; width: 16px; height: 16px; bottom: 10px; left: 10px; background-image: url(https://static.devatics.com/triangle-top.png); background-repeat: no-repeat;"></div>');
    $('#dvtAssistance .dvtToggle').append('<div class="dvtToggleIcon" style="position: absolute; width: 16px; height: 16px; bottom: 10px; right: 10px; background-image: url(https://static.devatics.com/triangle-top.png); background-repeat: no-repeat;"></div>');