3 button appear and disappear

Ask the community
,
1

Hi everyone,
I need your help to configure 3 buttons that appear and disappear when clicked on each one.
The script I wrote is this and buttons 1 and 2 work very well, button 3 does not show me what is inside it when clicked.
When I click button 2 and after button 3, then button 2 remains open.
Can you tell me where I’m wrong?
Thanks a lot to those who want / can help me
Elsa

$w.onReady(function () {
$w(‘#tokyoCollapseButton1’).onClick(() => {
toggleBox($w(‘#tokyoCollapsibleBox1’), $w(‘#tokyoPlusSign1’), $w(‘#tokyoMinusSign1’));
});

 $w('#romeCollapseButton2').onClick(() => { 
    toggleBox($w('#romeCollapsibleBox2'), $w('#romePlusSign2'), $w('#romeMinusSign2')); 
}); 

$w('#madridCollapseButton3').onClick(() => { 
    toggleBox($w('#madridCollapsibleBox3'), $w('#madridPlusSign3'), $w('#madridMinusSign3')); 
});

});

$w.onReady(function() {
$w(‘#tokyoCollapseButton1’).onClick(toggleFront);
$w(‘#romeCollapseButton2’).onClick(toggleBack);
$w(‘#madridCollapseButton3’).onClick(toggleBack);
})

function toggleBox(boxElement, plusSign, minusSign) {
const isCollapsed = boxElement.collapsed;
if (isCollapsed) {
plusSign.hide();
minusSign.show();
boxElement.expand();
}
}

function toggleFront() {
$w(‘#tokyoCollapsibleBox1’).show();
$w(‘#romeCollapsibleBox2’).hide();
$w(‘#madridCollapsibleBox3’).hide();
}

function toggleBack() {
$w(‘#tokyoCollapsibleBox1’).hide();
$w(‘#romeCollapsibleBox2’).show();
$w(‘#madridCollapsibleBox3’).hide();
}

function toggleBack1() {
$w(‘#tokyoCollapsibleBox1’).hide();
$w(‘#romeCollapsibleBox2’).hide();
$w(‘#madridCollapsibleBox3’).show();
}

2

Hi Elsa,

To start i would like to point out that the onready function should only be used 1 time on a page.
It is used to load data,elements, etc when the page is ready.
This only happends once :blush:

To toggle
You can use this method wich i use alot.


function toggle( element) {
	$w('#tokyoCollapsibleBox1').hide();
	$w('#romeCollapsibleBox2').hide();
   	 $w('#madridCollapsibleBox3').hide();

    element.show()
}

And u can use it like this

toggle($w("#yourElement"))

This way you only need 1 function to toggle.

About the reason why you don’t get anything with clicking button 3

	$w('#tokyoCollapseButton1').onClick(toggleFront);
	$w('#romeCollapseButton2').onClick(toggleBack);
    $w('#madridCollapseButton3').onClick(toggleBack);

The last button also does the function toggleBack i gues it needs to be toggleBack1

Solution

I think this part of code should do the trick, and evrything should work (if i’m correct)

$w.onReady(function () {
    $w('#tokyoCollapseButton1').onClick(() => {
        toggleBox($w('#tokyoCollapsibleBox1'), $w('#tokyoPlusSign1'), $w('#tokyoMinusSign1'));
    });


	 $w('#romeCollapseButton2').onClick(() => {
        toggleBox($w('#romeCollapsibleBox2'), $w('#romePlusSign2'), $w('#romeMinusSign2'));
    });


    $w('#madridCollapseButton3').onClick(() => {
        toggleBox($w('#madridCollapsibleBox3'), $w('#madridPlusSign3'), $w('#madridMinusSign3'));
    });
});

})



function toggleBox(boxElement, plusSign, minusSign) {
 const isCollapsed = boxElement.collapsed;
 if (isCollapsed) {
        plusSign.hide();
        minusSign.show();
        boxElement.expand();
    }
	
	$w('#tokyoCollapsibleBox1').hide();
	$w('#romeCollapsibleBox2').hide();
   	 $w('#madridCollapsibleBox3').hide();

    boxElement.show()
}

Kind regards,
kristof

3

Hi Kristof, thank you so much for your answer. I have tried you suggest and the problem was the :

The last button also does the function toggleBack i gues it needs to be toggleBack1

So now everything works perfectly.
Thank you so much again

Kind regards
Elsa

4

I tought so that that whas the problem,

The Solution part is the code solution in a short version of your code. :slightly_smiling_face:
If you have to write alot of code itss alot easyer to make your code as short as possible :slight_smile:

Anyway, happy i could help :blush:

Kind regards,
Kristof

5

I am having a similar case that I have six buttons, and want to show the corresponding description only after clicking that button.

E.g. Default to show step 1 description on load.
When clicking step 2 button, the box will only show step 2 description,
When clicking step 3 button, the box will only show step 3 description.

1104×389 35.9 KB

I was writing code with the first 3 steps only but it seems doesn’t work. May advise whereof it went wrong?
I only set ‘stepTwoDesc’, and ‘stepThreeDesc’ as Collapsed by default as I want Step one description shows by default.

$w.onReady(function () {
    $w('#stepTwoButton').onClick(() => {
        togglebox($w('#StepOneButton'),$w('#StepOneDesc),$w('#stepTwoDesc'),$w('#stepTwoButton'),$w('#StepThreeButton'),$w('#StepThreeDesc)
    });
});

function togglebox(stepOneButton, stepOneDesc, stepTwoDesc, stepTwoButton, stepThreeButton, stepThreeDesc){
    const isCollapsed=StepTwoDesc.collapsed;
    if(isCollapsed){
        groupStepTwo.expand();}
      else{
        groupStepTwo.collapse();}

And I repeat the above for step 3 button:

$w.onReady(function () {
    $w('#stepThreeButton').onClick(() => {
        togglebox($w('#StepOneButton'),$w('#StepOneDesc),$w('#stepTwoDesc'),$w('#stepTwoButton'),$w('#StepThreeButton'),$w('#StepThreeDesc)
    });
});

function togglebox(stepOneButton, stepOneDesc, stepTwoDesc, stepTwoButton, stepThreeButton, stepThreeDesc){
    const isCollapsed=StepThreeDesc.collapsed;
    if(isCollapsed){
        groupStepThree.expand();}
      else{
        groupStepThree.collapse();}

Total beginner for JS and Velo. Thanks a lot to anyone who wants to help.

Cynthia