JSFiddle - React, Tailwind, and code Playground

by Aakash Chakravarthy

HTML

<div class='anpn-wrap anpn-prev'>
        <div class="anpn-text">&lt;</div>
        <div class='anpn-cnt'>
            <p>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p> 
        </div>
    </div>

<div class='anpn-wrap anpn-next'>
        <div class="anpn-text">&gt;</div>
        <div class='anpn-cnt'>
            <p>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p> 
        </div>
    </div>

CSS

.anpn-wrap{
    position:fixed;
    top:50%;
    margin-top: -16px;
    background: black;
    color: white;
    box-sizing: border-box;
    overflow: hidden;
}
.anpn-wrap.anpn-next{
    right: 0;
}
.anpn-wrap.anpn-prev{
    left: 0;
}
.anpn-cnt{
    display: none;
}
.anpn-cnt, .anpn-text{
    padding: 20px;
}

.anpn-wrap:hover .anpn-text{
    display: none;
}
.anpn-wrap:hover .anpn-cnt{
    display: block;
    width:200px;
}

JavaScript

$('.anpn-wrap').mouseenter(function() {
    var $wrap = $(this).stop();
    var $txt = $wrap.find('.anpn-text').hide();
    var $cnt = $wrap.find('.anpn-cnt').css({
        'opacity': 0,
        'margin-top': '-50px',
        'width': '200px'
    }).show().animate({
        'opacity': 1,
        'margin': 0
    });
    $wrap.animate({
        'width': $cnt.outerWidth()
    });
}).mouseleave(function() {
    var $wrap = $(this);
    var $txt = $wrap.find('.anpn-text');
    var $cnt = $wrap.find('.anpn-cnt').show().stop().animate({
        'opacity': 0,
        'margin-top': '-50px'
    }, function() {
        $cnt.hide();
        $wrap.stop().animate({
            'width': $txt.outerWidth()
        });
        $txt.fadeIn();
    });
});