Switch buttons on top of each other and perform actions

Ask the community
,
1

Hello dear forum,

I’m absolutely desperate and I’m getting really angry. I have the following problem.
I would like to have the font displayed as “bold” by clicking on a button and the other font should become “normal” again and so on. I’ve already managed the whole thing with background colors… But I would like to have it as described above. Now I read in a forum that this doesn’t work with wix or velo. Now I try to do it all the time alternatively with two buttons in a row.

The following starting position:

  • I have eight button (actually 16 - eight font bold and eight font normal, located in a row)
  • Each button has a name.
  • The first button should be font “bold”.
  • The other seven buttons are “normal” font.
  • Now when I click on another name (button) that font should be “bold” and the other name (button) font should be “normal”.
  • In addition, the respective clicked button should open the associated page in a MultiStateBox, in my example:
    $w(‘#LeistungsBox’).changeState(“ProjektmanagementState”);
    …
    …
    and so on
  • There is one page per button

How can I finally do that? I’ve already tried 6 hours but I’m just getting mad.

1030×537 38.5 KB

2

Hi, you can do it with text elements but not with buttons (unless you create your own buttons in an iframe or custom element).

To do it with text elements, you can do something like:

$w.onReady(() => {
const texts = [$w('#text1'), $w('#text2')/*etc.*/];
texts.forEach(e => {
e.onClick(({target}) => {
const otherTexts = texts.filter(t => t.id !== target.id); 
$w('#' + target.id).html = `<p><b>${target.text}</b></p>`;
otherTexts.forEach(t => t.html = `<p>${target.text}</p>` );
})
})
})
3

Hi JD,

first of all, thank you for your message.
I’ve tried it and unfortunately it doesn’t work as desired and described.

  1. The text will simply be larger than previously selected
  2. Both texts become one name at once.
  3. In addition, no MultiStateBox is triggered

Does that work at all the way I want it to? I’m really shocked, because you see something like that on almost every second homepage and Wix and Velo can’t do that?

  1. All text is normal, except one font is bold. (Always only the one that was clicked is bold)
  2. At the same time, the one that is clicked should control a MultiStateBox and display the respective page for it.

I don’t want more :frowning:

4

  1. My code should make the text bold. As you can see I used an html tag that stands for bold. If it doesn’t work, you should console.log the html and see what’s going on.

  2. I don’t understand points 2-3;

    3.