How to hide the last element when i click others?

Ask the community
,
1

Hi, web site im creating is this:
https://timucinsalihoglu.wixsite.com/website-3/industry

In this page, what i want is when i click on the first item on the left " example:education" it gives information about education appears. Thats no problem but when i clicked the other item “example:energy” the last one i clicked “education” hides and then “energy” shows. So on and on.
Try to find examples but cant find it.

Thanks in advance

2 
let elements = [
{id: "text1", buttonId: "button1"},
{id: "text2", buttonId: "button2"},
{id: "text3", buttonId: "button3"},
//etc..
]
let selector = elements.reduce((a,c) => a + `#${c.buttonId},`, "");
$w.onReady(() => {
selector.onClick(event => {
elements.forEach(e => $w("#" + e.id).collapse());
let relevantItem = elements.find(e => e.buttonId === event.target.id);
$w("#" + relevantItem.id).expand();
})
})

FIXED

3

Hello,

The optimal code will look like something that @jonatandor35 wrote (as you have a bunch of elements you are working with), so try to implement it for sure.

Looking at your code, you could just add the relevant hide() functions, like this:

export function educationText_click(event) {
    $w("#education").show();
    $w("#energy").hide();
 //Add your code for this event here: 
}

export function energyText_click(event) {
    $w("#energy").show();
    $w("#education").hide();
}

Good luck!

4

Thanks both of you let me try.

5

Yes it worked thanks again. Wrote lots of conditions though :slight_smile:
https://timucinsalihoglu.wixsite.com/website-3/industry