How do I adjust the code for hidden elements in mobile view.

Ask the community
,
1

Hi.
I have certain elements that either “show” or “hide” on mouseIn or mouseOut in the desktop view. When I switch to the mobile view, I hid the elements, since hovering is not a concept for mobile views. How do I correct the code so I don’t receive code errors for the hidden elements.

Here is an example of the code on one of my pages. The code written in RED are the elements that I want to hide in mobile view. I’m not very experienced with writing code, so please make it simple.

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 fold1_mouseOut(event) {
$w('#fold1').collapse();
$w('#arrowDown1').hide();
$w('#arrowRight1').show()
//Add your code for this event here:
}
export function headerBox2_click(event) {
if ($w("#fold2").collapsed) {
$w("#fold2").expand();
} 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 fold2_mouseOut(event) {
$w('#fold2').collapse();
$w('#arrowDown2').hide();
$w('#arrowRight2').show()
//Add your code for this event here:
}
export function headerBox3_click(event) {
if ($w("#fold3").collapsed) {
$w("#fold3").expand();
} 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 fold3_mouseOut(event) {
$w('#fold3').collapse();
$w('#arrowDown3').hide();
$w('#arrowRight3').show()
//Add your code for this event here:
}
export function headerBox4_click(event) {
if ($w("#fold4").collapsed) {
$w("#fold4").expand();
} 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:
}
export function fold4_mouseOut(event) {
$w('#fold4').collapse();
$w('#arrowDown4').hide();
$w('#arrowRight4').show()
//Add your code for this event here:
}
export function headerBox4_click_1(event) {
//Add your code for this event here:
}

Thanks so much for your help!

Johanna

2

So you have taken this example with the code.
https://www.wix.com/corvid/example/collapse-elements
Live preview of the example
https://www.wix.com/code-examples/v2-collapsing

Code used

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();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}

export function headerBox1_onClick(event) {
toggleFold(1);
}

export function headerBox2_onClick(event) {
toggleFold(2);
}

export function headerBox3_onClick(event) {
toggleFold(3);
}

export function headerBox4_onClick(event) {
toggleFold(4);
}

And tried to add code for it which will work on mobile devices, however the issue is that you have wrote it all together and so it will run as above on desktop, mobile and tablet devices.

If you are wanting code to only work on certain devices, then you need to be looking at using the Wix Window API and the formFactor function from it.

You can see how to write code for mobile only devices here.

it might just be easier to keep it all using the onClick event function, that way you won’t have to modify it for any device being used.

However, that is your own choice and if you want to use onMouseIn and onMouseOut, then you will need to code it for mobile devices as shown in the links above.