Buttons not responding to collapse() and expand() in mobile ONLY

I’m having trouble with

  • I have a multilingual site (WIX Editor), I have had an issue with buttons
  • I made each language (English, French, and Spanish) a set of buttons on a page
  • I used code to collapse or expand the proper buttons for each language
  • Outcome:
    – It works on Desktop
    All buttons show up in the mobile editor

Working in

  • Wix Editor
  • Multilingual

What I’m trying to do
I need it working for mobile view

What I’ve tried so far

import wixWindow from 'wix-window';

$w.onReady(async function () {

    //==========================================
    // Language tweaks
    //==========================================
    let lang = wixWindow.multilingual.currentLanguage; // returns 'en' or 'fr'

    switch (lang) {
    case 'en': // English
        await runEnglishCode();
        break;

    case 'fr': // French
        await runFrenchCode();
        break;

    case 'es': // Spanish
        await runSpanishCode();
        break;
    }
    
    // Shown only on English
    function runEnglishCode() {

        console.log("English selected");

        $w('#section2-en').expand()
        $w('#section2-fr').collapse()
        $w('#section2-sp').collapse()

        $w('#enfr-underline').show()
        $w('#sp-underline').hide()

        $w('#en-LearnMore').expand()
        $w('#fr-LearnMore').collapse()
        $w('#sp-LearnMore').collapse()

        $w('#en-buttonLocation').expand()
        $w('#fr-buttonLocation').collapse()
        $w('#sp-buttonLocation').collapse()

    }
    // Shown only on French
    function runFrenchCode() {
        console.log("French selected");
        // French-specific code here
        $w('#section2-en').collapse()
        $w('#section2-fr').expand()
        $w('#section2-sp').collapse()

        $w('#enfr-underline').expand()
        $w('#sp-underline').collapse()

        $w('#en-LearnMore').collapse()
        $w('#fr-LearnMore').expand()
        $w('#sp-LearnMore').collapse()

        $w('#en-buttonLocation').collapse()
        $w('#fr-buttonLocation').expand()
        $w('#sp-buttonLocation').collapse()
    }

    // Shown only on Spanish
    function runSpanishCode() {
        console.log("Spanish selected");
        // Spanish-specific code here
        $w('#section2-en').collapse()
        $w('#section2-fr').collapse()
        $w('#section2-sp').expand()

        $w('#enfr-underline').hide()
        $w('#sp-underline').show()

        $w('#en-LearnMore').collapse()
        $w('#fr-LearnMore').collapse()
        $w('#sp-LearnMore').expand()

        $w('#en-buttonLocation').collapse()
        $w('#fr-buttonLocation').collapse()
        $w('#sp-buttonLocation').expand()
    }

});

Extra context
I am not allowed to show specific content, so I “squared” them out


1 Like