JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

<div class="container">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <div class="arrow">&rarr;</div>
</div>
<div class="container">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <div class="arrow">&rarr;</div>
</div>
<div class="container">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <div class="arrow">&rarr;</div>
</div>

JavaScript

$(document).ready(function () {
    $('li:first-child')
    .siblings()
    .hide();
    
    $('.arrow').click(function () {
        $(this)
            .fadeOut(function () {

            $(this)
                .next()
                .fadeIn();
            $(this)
                .appendTo('ul');


        });
    });

});