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.
Before you see the code, make sure you watch the video to learn how to design and set up the tabs for the selections:
Now that you have the design set up correctly, make sure all the elements are named correctly and copy in the code below:
$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.