JSFiddle - React, Tailwind, and code Playground

by elneco

HTML

<div class="boxes left sixty">
    <ul>
        <li class="one img">1</li>
        <li class="two img">2</li>  
        <li class="three img">3</li>
        <li class="four img">4</li>
        <li class="five img">5</li>
    </ul>            
</div>

<div class="thirtyfive right">
    <button class="one">first</button> <br />
    <button class="two">second</button> <br />
    <button class="three">third</button> <br />
    <button class="four">fourth</button> <br />
    <button class="five">fifth</button>
</div>

CSS

.left {float: left;}
.right {float: right;}

.sixty {width: 60%; }
.thirtyfive { width: 35%; }

.img { background: green; color: white; font-size: 45px;}

/* The box CSS */
.boxes {
    float: left; 
    position: relative;
}

.boxes ul {
    display: block; 
    float: left; 
    position: absolute; 
    width: 100px; 
    list-style: none;
}

.boxes ul li {
    display: block; 
    float: left;
    clear: left;
    position: relative;    
    width: 75px; height: 75px; 
    margin-bottom: 10px;
}

JavaScript

$(document).ready(function() {
    $('button').click(function() {
        // Define the button class
        var buttonClass = '.boxes .' + $(this).attr('class');
        
        // Calculate the current position in the list
        var currentPos = $(buttonClass).index();
        
        // Calculate the height of the item
        var itemHeight = $(buttonClass).height() + 10;
        
        // Calculate the top - item, so the nr of pixels to top
        var wayToTop = currentPos * (0 - itemHeight) + 'px';
        
        // Loop through the list
        $('.boxes ul li').each(function(index) {
            // Define the margin of the box (top margin)
            var itemTop = $('.boxes ul li').eq(index).css('top');
           
            // Check the values
            if(index != 0 && itemTop != 0 && currentPos != index) {
                // Make the other animations
                $('.boxes ul li').eq(index).animate({
                    'top' : '0px'
                }, 500);
            }
            
            if(currentPos != 0 && index == 0) {
                if(currentPos == 1) {
                    // Make the other animations
                    $('.boxes ul li').eq(index).animate({
                        'top' : itemHeight
                    }, 500);                
                } else {
                    // Make the other animations
                    $('.boxes ul li').eq(index).animate({
                        'top' : (currentPos * itemHeight)
                    }, 500);                
                }
            }
        });
        
        // Animate the clicked item
        $(buttonClass).animate({
            'top' : wayToTop
        }, 500);          
    });
});