top of page

Velo: Tab Selection Section

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.


How to Create Tab Selection Sections in Wix Using Velo

 

$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.






Comentarios


bottom of page