import React, { useState } from 'react'
import SliderUp from '@svg/icons/slider-up.svg'
import SliderDown from '@svg/icons/slider-down.svg'

export const Slide=()=> {
// show and hide state on individual button click
    const [toggleState, setToggleState] = useState(1);
    const toggleTab = (index:number) => {
      setToggleState(index);
    };
 //hover between buttons state through the sliderup and sliderdown button
    const changeState = (direction:string) => setToggleState(prev => 
        {
        const curr = direction === 'down' ? prev + 1 : prev - 1;
            return curr < 1 ? 2 : curr > 2 ? 1 : curr
        });


return (
   <div>
       {/* buttons to the left */}
        <div>
            <button onClick={() => changeState('up')} >
                <SliderUp />
            </button>
            <ul >
                <li>
               

 <button className={toggleState===1 ? "inline-block w-3 h-3 " : "inline-block w-1 h-1"} onClick={() => toggleTab(1)} >`
                </button>
            </li>
      
            <li>
                <button className={toggleState===2 ? "inline-block w-3 h-3 " : "inline-block w-1 h-1"}
                    onClick={() => toggleTab(2)}>
                </button>
            </li>
        </ul>

I want to change components class "animate-slideB" to "animate-slideT" on buttonclick with the state down

        <button onClick={() => changeState('down')} >
            <SliderDown />
        </button>
    </div>

    {/* components to the right */}
    <div>
        <div className="w-full ">
          
            {toggleState == 1 &&
             <div className='animate-slideB'>
                <TopPart/> // component
            </div>}

             {toggleState == 2 &&
             <div className='animate-slideB'>
                <MythicCol/> //component
            </div>}
            
        </div>
    </div>  

I tried this method of adding a function to the button with change state "down" and giving id="sampleDiv" to div elements containing components.But it didnt work.

animate-slideB: animation from top to bottom,

animate-slideT: animation from bottom to top

  const handlebuttonclass=()=>{
        let sampleElem= document.getElementById("sampleDiv");
        if(sampleElem?.className==='animate-slideB'){
            sampleElem.className= 'animate-slideT'
        }
        else{
            sampleElem!.className= 'animate-slideB';
        }
    }