Hide element when other element show

Ask the community
,
1

Hi,

I make 3 column strip with arrow down to show the different repeaters when click on the arrow down. Each arrow down link to respective repeater. It will collapse when click on the arrow down again. But right now I am stuck in how to show only one repeater when I click any of the arrow down ? Your help is really appreciated. Thanks in advance !

810×565 67.5 KB

export function arrow1_click(event) {
if ($w(“#repeater1”).collapsed) {
$w(“#repeater1”).expand();
} else
$w(“#repeater1”).collapse();
}

export function arrow2_click(event) {
if ($w(“#repeater2”).collapsed) {
$w(“#repeater2”).expand();
} else
$w(“#repeater2”).collapse();
}

export function arrow3_click(event) {
if ($w(“#repeater3”).collapsed) {
$w(“#repeater3”).expand();
} else
$w(“#repeater3”).collapse();
}

2 
$w("#arrow1, #arrow2, #arrow3").onClick((event) => {
    let targetId = event.target.id;
    let id = Number(targetId[targetId.length -1]);
    for(let i = 1; i < 4; i++){
        if(i === id){
            $w("#repeater" + i).collapsed ? $w("#repeater" + i).expand():             $w("#repeater" + i).collapse();
            }else{
            $w("#repeater" + i).collapse();
            }
        }
})

[updated]

3

Hi J.D.

I have used a code similar to this to show & hide multiple elements. Some of the elements end in 2-digits, so I can’t use - [targetId.length -1]

I have tried:
[targetId.match (/\d+/) [0]] but it doesn’t work.

Do you have any suggestions to where I am going wrong?

Thank you

4

@beck_1001 if you have a specific pattern like:
arrow1, arrow2, arrow3, then the easiest way will be:

let id = Number(targetId.split("arrow")[1]));
5

@jonatandor35 thank you that’s great and it work’s up until number 16…so using your example it works for “arrow1” to “arrow15” but doesn’t for any after that.

Could it be the rest of my code?

6

import {local} from ‘wix-storage’ ;
import wixLocation from ‘wix-location’ ;

$w.onReady( function (){

$w( “#Letter1, #Letter2, #Letter3, #Letter4, #Letter5, #Letter6, #Letter7, #Letter8, #Letter9, #Letter10, #Letter11, #Letter12, #Letter13, #Letter14, #Letter15, #Letter16, #Letter17, #Letter18, #Letter19, #Letter20, #Letter21, #Letter22, #Letter23, #Letter24, #Letter25, #Letter26” ).onClick((event) => {
let targetId = event.target.id;
let id = Number(targetId.split( “Letter” )[ 1 ]);
for ( let i = 1 ; i < 26 ; i++){
if (i === id){
$w( “#Author” + i).hide ? $w( “#Author” + i).show():
$w( “#Author” + i).hide();
}
else {
$w( “#Author” + i).hide();
}
}
})
});

7

@beck_1001 Check property IDs of the Author elements. I guess you misspelled them and that’s why it doesn’t work.

But anyhow you have some mistakes in you code (see in red):

for (let i = 1; i < 27; i++){
 if(i === id){
            $w("#Author" + i).hidden ? $w("#Author" + i).show(): $w("#Author" + i).hide();
            }
 else{
                $w("#Author" + i).hide();
            }
    }
8

@jonatandor35 thank you so much for your help, I really appreciate it. I will check my spelling.