JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<ul id="process">
    <li class="item1">item1</li>
    <li class="item2">item2</li>
    <li class="item3">item3</li> 
</ul>
<div id="initial_consultation">Initial Consultation</div>
<div id="item1">Item 1 div</div>
<div id="item2">Item 2 div</div>
<div id="item3">Item 3 div</div>

CSS

#process li {display: block; float: left;}
#process li.active {color: #c00;}
div {clear: both; opacity: 0;}

JavaScript

$("#process li").mouseenter(function(){
                        console.log($(this));
            toggleElem($('#' + $(this).attr('class')));
            if(!$(this).hasClass('active')){
                $('.active').removeClass('active');
                $(this).addClass('active');
            }

    });

function toggleElem(elem){

    if(typeof elem.attr('id') != 'undefined'){
        if(elem.attr('id') != $('.current').attr('id')){
            $('.current').css('z-index', 4000).animate({
                top: '+=60',
                opacity: 'hide',
                interval: 200
            }, 1000).removeClass('current');
            
            
        }
    }
    

        elem.delay(500).css({top:'60px', zIndex:4001}).animate({
            top: 0,
            opacity: 'show'
        }, 1000).addClass('current');
    toggleElem($('#initial_consultation'));
}