JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<a href="#">click</a>

<p>one</p>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
<p>six</p>
<p>seven</p>

CSS

p:nth-child(3) {margin-left: 30px;}
p:nth-child(4) {margin-left: 65px;}
p:nth-child(5) {margin-left: 105px;}
p:nth-child(6) {margin-left: 145px;}
p:nth-child(7) {margin-left: 180px;}
p:nth-child(8) {margin-left: 210px;}

p {
    background: pink;
}

JavaScript

$('a').click(function() {
    
    var $end = $('p:eq(2)');
    
    $end.css('background','red');
    
    fold($('p:eq(1)'));
    fold($('p:eq(3)'));
    fold($('p:eq(4)'));
    
    function fold(x) {
        var start = x.position();
        var _end = $end.position();
        var _height = x.height();
        
        var _math = _end.top-start.top;
        
        console.log(_math+' <> '+_end.top);
        
        x.append(' ::: ' + _math);
        x.css({
            'background':'#ddd',
            'position':'relative',
            'top':_math+'px',
            //'margin-bottom': '-'+_height+'px'
            //'height':'1em'
        });
        
        if (_math > 0) {
            //x.css({'margin-bottom':'-'+_math+'px'});
        }
        else {
            //x.css({'margin-top':'-'+_math+'px'});
        }           

    }
});