I designed a vertical slide from bottom navigation on mobile. I would like each tab could move (up or down) with the upper one. May be the toggle method isn't the right one. I use vanilla JS.

Here is my function. The two last lines are to show the idea. I would like to write it in a better way.

let children = document.getElementById('mobile-container').children;

for (let i = 0; i < children.length; i++) {
    children[i].addEventListener("touchstart", function () {
        children[i].classList.toggle("unfold");
        children[i-1].classList.toggle("unfold");
        children[i-2].classList.toggle("unfold");
    });
}

Here is my HTML

<div id="mobile-container">
                <div id="mobile-projets" class="mobile">
                    <h2>Projets</h2>
                </div>
                <div id="mobile-expertises" class="mobile">
                    <h2>Expertises</h2>
                </div>
                <div id="mobile-clients" class="mobile">
                    <h2>Clients</h2>
                </div>
</div>

Here is my CSS

 #mobile-container {
        display: block;
        position: relative;
        width: 100%;
        height: 85vh;
        top: 15vh;
    }

    #mobile-projets {
        width:100%;
        height: 100%;
        background: #00A6C6;
        text-align: center;
        border-radius: 1em 1em 0 0;
        position: absolute;
        top: 69vh;
    }   

    #mobile-expertises {
        width:100%;
        height: 95%;
        background: #FFFFFF;
        color: black;
        text-align: center;
        border-radius: 1em 1em 0 0;
        position: absolute;
        top: 74vh;
    } 

    #mobile-clients {
        width:100%;
        height: 90%;
        background: #00A6C6;
        text-align: center;
        border-radius: 1em 1em 0 0;
        position: absolute;
        top: 79vh;
    }
    
    #mobile-projets.unfold {
        top: 0;
        transition: all 1s ease;
        -webkit-transition: all 1s easeout;
        -moz-transition: all 1s easeout;
        -ms-transition: all 1s easeout;
        -o-transition: all 1s easeout;
    }

    #mobile-expertises.unfold {
        top: 5vh;
        transition: all 1s ease;
        -webkit-transition: all 1s easeout;
        -moz-transition: all 1s easeout;
        -ms-transition: all 1s easeout;
        -o-transition: all 1s easeout;
    }

    #mobile-clients.unfold {
        top: 10vh;
        transition: all 1s ease;
        -webkit-transition: all 1s easeout;
        -moz-transition: all 1s easeout;
        -ms-transition: all 1s easeout;
        -o-transition: all 1s easeout;
    }