function toggleFold(index) {

    let $fold = $w('#fold' + index);

    let $arrowDown = $w('#arrowDown' + index);

    let $arrowRight = $w('#arrowRight' + index);

    // toggle the fold at the index

    if ($fold.collapsed) {

        $fold.expand();

        $arrowDown.show();

        $arrowRight.hide();

    }

    else {

        $fold.collapse();

        $arrowDown.hide();

        $arrowRight.show();

    }

    // collapse the other folds

    //[1,2,3,4,5]

        //.filter(idx => idx !== index)

        //.forEach(idx => {

            //$w('#fold' + idx).collapse();

            //$w('#arrowDown' + idx).hide();

            //$w('#arrowRight' + idx).show();

        //})

}

 

//https://www.youtube.com/watch?v=HmTkf5af0NE&feature=youtu.be

 

export function headerBox4_click(event, $w) {

    toggleFold(4);

}

 

export function headerBox3_click(event, $w) {

    toggleFold(3);

}

 

export function headerBox2_click(event, $w) {

    toggleFold(2);

}

 

export function headerBox1_click(event, $w) {

    toggleFold(1);

}

 

export function headerBox5_click(event, $w) {

    toggleFold(5);

}

 

export function headerBox4_click_1(event, $w) {

    toggleFold(4);

}

 

export function headerBox3_click_1(event, $w) {

    toggleFold(3);

}

 

export function headerBox2_click_1(event, $w) {

    toggleFold(2);

}

 

export function headerBox1_click_1(event, $w) {

    toggleFold(1);

}

 

export function headerBox5_click_1(event, $w) {

    toggleFold(5);

}

 

export function headerBox6_click(event, $w) {

    toggleFold(6);

}

 

export function headerBox7_click(event, $w) {

    toggleFold(7);

}