Help Request! Changing Icon button

Ask the community
,
1

1157×215 31.8 KB

Trying to change the (+) icon button to (-) when the button is clicked

2

Hi!

You can add the two text elements positioned over each other and set the minus to be hidden on load from the properties panel as shown below:

1029×403 23 KB

And then add an onClick() function to each element to hide and show the opposite element like so:

Or

You can also do this with one element and then use a condition to change the text of the element to + or - every time it’s clicked like so:

Here’s an article you can use as reference: https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events

I hope this information was helpful!

Best regards,
Miguel

3

Hi Miguel,

Thank you for the reply.

(I used the second method element)

It works but the “+” sign changes to “-” only when i click two times… I want it to change on one press also.

I have attached a video

4

So why not just use the first code and simply add your text boxes collapse and expand functions to that?

5

You only show the used code for the plus and minus part from the sample provided, please add your full code for this as your existing code on previous lines could be affecting this.

6

export function text240_click(event) {
if ($w( ‘#text106’ ).expand) {
$w( ‘#text106’ ).collapse();
}
else
$w( ‘#text106’ ).expand();
}

export function text241_click(event) {
if ($w( ‘#text106’ ).collapsed) {
$w( ‘#text106’ ).expand();
}
else
$w( ‘#text106’ ).collapse();

$w( '#text241' ).onClick(() => { 
    $w( '#text241' ).hide(); 
    $w( '#text240' ).show(); 
}) 

$w( '#text240' ).onClick(() => { 
    $w( '#text240' ).hide(); 
    $w( '#text241' ).show(); 

})

}

This is the codes i used.
It eventually works after few times pressing the elements.
But why it’s not working from the start itself?

7

@marketingaapotheke

im also looking for a way to chanbge the button icon through code but it seems like that only vectorimage is working (Cant make button label with vector image).

Give it a try

exportfunction text240_click(event) {
if ($w( ’ #text106 ’ ).isVisible) {
$w( ’ #text106 ’ ).collapse();
} else {
$w( ’ #text106 ’ ).expand(); }
}

DA