JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

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

<p class="fold1">one</p>
<p>two</p>
<p class="drop">three</p>
<p class="fold2">four</p>
<p class="fold3">five</p>
<p>six</p>
<p class="fold4">seven</p>
<p>eight</p>

CSS

p {
    background: pink;
}
.parent p {
    background: red;
}
.fold1,.fold2,.fold3,.fold4 {
    z-index: -100;
}

JavaScript

$('a').click(function() {
    var speed = 500;
    var $end = $('.drop');
    
    fold($('.fold1'));
    fold($('.fold2'));
    fold($('.fold3'));
    fold($('.fold4'));
 
    
    setTimeout(function(){  
        //fix($('.fold1'));
        //fix($('.fold2'));
        //fix($('.fold3'));
        //fix($('.fold4'));
    }, 0);
    
    $end.wrap('<div class="parent"/>');
    
    function fold(x) {
        var start = x.position();
        var _end = $end.position();
        var _height = x.height();
        
        var _math = _end.top-start.top;
        
        x.attr('offset',_math);
        
        console.log(_math);            
        
        x.css({
            'position':'relative',
            'top':'0px',
        }).animate({
            //'top':_math+'px'
            
        },speed);
    
        fix(x);        
       
    }
    
    function fix(x) {
        _offset = x.attr('offset');        
    
        if (_offset < 0) {
            x.slideUp(speed);
        }
        else if (_offset > 0) {
            x.slideUp(speed);
        }
    }
});