Velo: Tab Selection Section
- Jan 24, 2022
- 1 min read
Have you ever wanted to display a lot of content within tabs on your page? Well in this quick lesson, you will learn how to create a tab selection section in Wix using Velo. The good thing is, this lesson is actually pretty easy to understand.
$w.onReady(function () {
$w('#summerButton').onClick(() => {
$w('#summerLine').show();
$w('#summerBox').expand();
$w('#summerBox').show();
$w('#fallBox').collapse();
$w('#fallLine').hide();
$w('#winterBox').collapse();
$w('#winterLine').hide();
$w('#springBox').collapse();
$w('#springLine').hide();
});
$w('#fallButton').onClick(() => {
$w('#summerLine').hide();
$w('#summerBox').collapse();
$w('#fallBox').expand();
$w('#fallLine').show();
$w('#winterBox').collapse();
$w('#winterLine').hide();
$w('#springBox').collapse();
$w('#springLine').hide();
});
$w('#winterButton').onClick(() => {
$w('#summerLine').hide();
$w('#summerBox').collapse();
$w('#fallBox').collapse();
$w('#fallLine').hide();
$w('#winterBox').expand();
$w('#winterLine').show();
$w('#springBox').collapse();
$w('#springLine').hide();
});
$w('#springButton').onClick(() => {
$w('#summerLine').hide();
$w('#summerBox').collapse();
$w('#fallBox').collapse();
$w('#fallLine').hide();
$w('#winterBox').collapse();
$w('#winterLine').hide();
$w('#springBox').expand();
$w('#springLine').show();
});
});
If you are having issues getting this code to work, be sure all the page element names are the same as in the code. Feel free to rename the section as you wish.
Comments