JSFiddle - React, Tailwind, and code Playground

by thiswolf

HTML

<div class="fixedcol">
    <div id="styleswitch" class="fixedpoint closed"></div>
</div>

CSS

body {
    height:1500px;
}

JavaScript

$('#styleswitch').addClass('closed');
$('.fixedpoint').css({
    'background-color': 'red',
        'position': 'fixed',
        'width': '30px',
        'height': '30px',
        'left': '97%',
        'top': '20%'
});
$('.fixedcol').css({
    'background-color': 'pink',
        'position': 'fixed',
        'width': '200px',
        'height': '100px',
        'left': '100%',
        'top': '20%'
});
$('.fixedpoint').on('click', function () {
    if ($('#styleswitch').hasClass('closed')) {
        $(".fixedcol").css({
            'padding-right': '1px',
            'height': '300px'
        }).animate({
            left: '77.12%'
        }, 350);
    } else if ($('#styleswitch').hasClass('open')) {                
        $('.fixedcol').css({
            'background-color': 'pink',
                'position': 'fixed',
                'width': '200px',
                'height': '100px',
                'left': '100%',
                'top': '20%'
        });
    }
    $('#styleswitch').toggleClass('open closed');
});