The accordion header doesn't place under one another. They are placed after accordion box. Need help.

when I hide the accordion content box then the accordion header doesn’t place after one another. They are placed after the accordion content box. I want the second accordion header placed under the first accordion header. I wrote the code for animating hide and show.
import wixAnimations from ‘wix-animations’ ;
//For Accordion
function toggleFoldA ( index ) {
let $fold = $w ( ‘#accordionBox’ + index );
let $minus = $w ( ‘#MinusA’ + index );
let $plus = $w ( ‘#PlusA’ + index );
let timeline = wixAnimations . timeline ()
let slideInOptions ={
“duration” : 900 ,
“delay” : 0 ,
“direction” : “top”
}

// toggle the fold at the index
if ( $fold . hidden ) {
$fold . show ( “slide” , slideInOptions );
timeline . play ();
$minus . show ();
$plus . hide ();

} else {
$fold . hide ( “slide” , slideInOptions );
timeline . reverse ()

$minus . hide (); 
$plus . show (); 

}

// collapse the other folds
[ 1 , 2 , 3 ]. filter ( idx => idx !== index ). forEach ( idx => {
$w ( ‘#accordionBox’ + idx ). hide ( “slide” , slideInOptions );
timeline . play ();
$w ( ‘#MinusA’ + idx ). hide ();
$w ( ‘#PlusA’ + idx ). show ();
});
}

export function accordion1_click ( event ) {
toggleFoldA ( 1 );
}

export function accordion2_click ( event ) {
toggleFoldA ( 2 );
}

export function accordion3_click ( event ) {
toggleFoldA ( 3 );
}