How Do I Debug a Hidden Element on Mobile

Ask the community
,
1

I am not an experienced coder at all. So, please bear with me. I have written toggle code to show and hide boxes on when they are clicked. I also placed Down and Right Arrows to behave OnClick, as well. The problem is that I need to HIDE the Arrows in the mobile view. This creates problems with the code. I am very inexperienced with this. How do I debug the code so it runs smoothly on all platforms?

import wixWindow from 'wix-window';

// ...

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]
    .filter(idx => idx !== index)
        .forEach(idx => {
            $w('#fold' + idx).collapse();

        })
}

export function headerBox1_click(event) {

 if ($w("#fold1").collapsed) {
        $w("#fold1").expand();
 
 
    } else {
        $w("#fold1").collapse();
    $w('#arrowDown1').hide();
    $w('#arrowRight1').show()
 //Add your code for this event here: 
}}

export function fold1_mouseIn(event) {
    $w('#fold1').expand();
    $w('#arrowDown1').show();
    $w('#arrowRight1').hide()
 //Add your code for this event here: 
}

export function headerBox2_click(event) {
 if ($w("#fold2").collapsed) {
        $w("#fold2").expand();  
        $w('#arrowDown2').show();
    $w('#arrowRight2').hide()
    } else {
        $w("#fold2").collapse();
    $w('#arrowDown2').hide();
    $w('#arrowRight2').show()
 //Add your code for this event here: 
}}
//Add your code for this event here: 

export function fold2_mouseIn(event) {
    $w('#fold2').expand();
    $w('#arrowDown2').show();
    $w('#arrowRight2').hide()
 //Add your code for this event here: 
}

export function headerBox3_click(event) {
 if ($w("#fold3").collapsed) {
        $w("#fold3").expand();  
        $w('#arrowDown3').show();
    $w('#arrowRight3').hide()
    } else {
        $w("#fold3").collapse();
    $w('#arrowDown3').hide();
    $w('#arrowRight3').show()
 //Add your code for this event here: 
}}

export function fold3_mouseIn(event) {
    $w('#fold3').expand();
    $w('#arrowDown3').show();
    $w('#arrowRight3').hide()
 //Add your code for this event here: 
}
export function headerBox4_click(event) {
 if ($w("#fold4").collapsed) {
        $w("#fold4").expand();  
        $w('#arrowDown4').show();
    $w('#arrowRight4').hide()
    } else {
        $w("#fold4").collapse();
    $w('#arrowDown4').hide();
    $w('#arrowRight4').show()
 //Add your code for this event here: 
}}

export function fold4_mouseIn(event) {
    $w('#fold4').expand();
    $w('#arrowDown4').show();
    $w('#arrowRight4').hide()
 //Add your code for this event here: 
}

I tried to looking up the issue in Wix API, but I don’t know how to implement the Form Factor code properly. I’d really appreciate some detailed in formation on how to fix this.
Thanks!