Hi there!
I would like to know how to make a text expand and another text collapse when clicking a button.
I have these buttons. And my goal is to make text appear for each button. But when I click one button I want the previous text to disappear. Example: I click the button “worry” and text01 appear. I then click the button named Overwhelment, then text01 disappears and text02 appears.
I have managed to make the text expand on click but I am having trouble making the previous text (that expanded when another button was clicked) collapse. Right now I have this ridiculous long statement in an attempt to make all other text collapse. And it doesn’t work (hey, I’m no coder obvs). Here it goes:
// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world
$w.onReady(function () {
// Write your JavaScript here
// To select an element by ID use: $w('#elementID')
// Click 'Preview' to run your code
});
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button2_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#text01').expand();
$w('#image01').expand();
$w('#text02','#text03','#text04','#text05','#text06','#text07','#text08','#text09','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image02','#image03','#image04','#image05','#image06','#image07','#image08','#image09','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button02_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#text02').expand();
$w('#image02').expand();
$w('#text01','#text03','#text04','#text05','#text06','#text07','#text08','#text09','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image03','#image04','#image05','#image06','#image07','#image08','#image09','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button03_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#text03').expand();
$w('#image03').expand();
$w('#text01','#text02','#text04','#text05','#text06','#text07','#text08','#text09','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image04','#image05','#image06','#image07','#image08','#image09','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button04_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#image04').expand();
$w('#text04').expand();
$w('#text01','#text02','#text03','#text05','#text06','#text07','#text08','#text09','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image03','#image05','#image06','#image07','#image08','#image09','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button05_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#text05').expand();
$w('#image05').expand();
$w('#text01','#text02','#text03','#text04','#text06','#text07','#text08','#text09','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image03','#image04','#image06','#image07','#image08','#image09','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button06_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#image06').expand();
$w('#text06').expand();
$w('#text01','#text02','#text03','#text04','#text05','#text07','#text08','#text09','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image03','#image04','#image05','#image07','#image08','#image09','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button07_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#image07').expand();
$w('#text07').expand();
$w('#text01','#text02','#text03','#text04','#text05','#text06','#text08','#text09','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image03','#image04','#image05','#image06','#image08','#image09','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button08_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#image08').expand();
$w('#text08').expand();
$w('#text01','#text02','#text03','#text04','#text05','#text06','#text07','#text09','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image03','#image04','#image05','#image06','#image07','#image09','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button09_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#image09').expand();
$w('#text09').expand();
$w('#text01','#text02','#text03','#text04','#text05','#text06','#text07','#text08','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image03','#image04','#image05','#image06','#image07','#image08','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button010_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#image10').expand();
$w('#image10').expand();
$w('#text01','#text02','#text03','#text04','#text05','#text06','#text07','#text08','#text09','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image03','#image04','#image05','#image06','#image07','#image08','#image09','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button011_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#image11').expand();
$w('#text11').expand();
$w('#text01','#text02','#text03','#text04','#text05','#text06','#text07','#text08','#text09','#text10','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image03','#image04','#image05','#image06','#image07','#image08','#image09','#image10','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
/**
* Adds an event handler that runs when the element is clicked.
[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
* @param {$w.MouseEvent} event
*/
export function button12_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w('#image10').expand();
$w('#text10').expand();
$w('#text01','#text02','#text03','#text04','#text05','#text06','#text07','#text08','#text09','#text10','#text11','#text12','#text13','#text14','#text15','#text16','#text17','#text18','#text19').collapse();
$w('#image01','#image02','#image03','#image04','#image05','#image06','#image07','#image08','#image09','#image10','#image11','#image12','#image13','#image14','#image15','#image16','#image17','#image18','#image19').collapse();
}
Okay, so I am referring to the ‘#text01’,‘#text02’,'#text03 and so on. Is there any way to have it like #text01-text10… or something? Cos this is obvs not working out for me lol.
Super thankful for any help I can get!