JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<button class="contant-footer__menu-services">@lang('header.services')</button>
                  <ul class="contant-footer__menu-list">
                     <li class="contant-footer__menu-item"><a
                           href="{{ route('therapeutic.lang', ['locale' => __('lang.current')]) }}"
                           class="contant-footer__menu-link @yield('therapeutic')">@lang('home.services.service.title_1')</a>
                     </li>
                     <li class="contant-footer__menu-item"><a
                           href="{{ route('surgery.lang', ['locale' => __('lang.current')]) }}"
                           class="contant-footer__menu-link @yield('surgery')">@lang('home.services.service.title_2')</a>
                     </li>
                     <li class="contant-footer__menu-item"><a
                           href="{{ route('cleaning.lang', ['locale' => __('lang.current')]) }}"
                           class="contant-footer__menu-link @yield('cleaning')">@lang('home.services.service.title_3')</a>
                     </li>
                     <li class="contant-footer__menu-item"><a
                           href="{{ route('prosthesis.lang', ['locale' => __('lang.current')]) }}"
                           class="contant-footer__menu-link @yield('prosthesis')">@lang('home.services.service.title_4')</a>
                     </li>
                     <li class="contant-footer__menu-item"><a
                           href="{{ route('pediatrician.lang', ['locale' => __('lang.current')]) }}"
                           class="contant-footer__menu-link @yield('pediatrician')">@lang('home.services.service.title_5')</a>
                     </li>
                     <li class="contant-footer__menu-item"><a
                           href="{{ route('plasmotherapy.lang', ['locale' => __('lang.current')]) }}"
                           class="contant-footer__menu-link @yield('plasmotherapy')">@lang('home.services.service.title_6')</a>
       ...

SCSS

.contant-footer__menu-list {
      padding-top: 0px;
      height: 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.5s ease 0s;
      
         opacity: unset;
         visibility: unset;
         li{
            opacity: 0;
            visibility: hidden;
         }
         li:first-child{
            transition: all 0.3s ease 0s;
         }
         li:nth-child(2){
            transition: all 0.25s ease 0s;
         }
         li:nth-child(3){
            transition: all 0.2s ease 0s;
         }
         li:nth-child(4){
            transition: all 0.15s ease 0s;
         }
         li:nth-child(5){
            transition: all 0.1s ease 0s;
         }
         li:nth-child(6){
            transition: all 0s ease 0s;
         }
      
      

      .active{
         padding-bottom: 20px;
         padding-top: 20px;
         height: 235px;
         opacity: 1;
         visibility: visible;
         @media (max-width: $mobile) {
            height: 305px;
         }
            
            li:first-child{
               transition: all 0.5s ease 0s;
               opacity: 1;
               visibility: visible;
            }
            li:nth-child(2){
               transition: all 0.5s ease 0.05s;
               opacity: 1;
               visibility: visible;
            }
            li:nth-child(3){
               transition: all 0.5s ease 0.1s;
               opacity: 1;
               visibility: visible;
            }
            li:nth-child(4){
               transition: all 0.5s ease 0.15s;
               opacity: 1;
               visibility: visible;
            }
            li:nth-child(5){
               transition: all 0.5s ease 0.2s;
               opacity: 1;
               visibility: visible;
            }
            li:nth-child(6){
               transition: all 0.5s ease 0.25s;
               opacity: 1;
               visibility: visible;
            }
         
         @media (max-width: em(345)) {
           ...

JavaScript

document.querySelector('.contant-footer__menu-services').addEventListener('click', () => document.querySelector('.contant-footer__menu-list').classList.toggle('active'));