Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX ACCORDIAN - BOX STYLE
Need an accordian for your online store? This tutorial will show you how to create a Wix Accordian to expand and collapse your website content. Improve your website's layout, reduce clutter and improve user experience. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
THE ELEMENTS
The Page
Container Boxes:
-
Title Box 1: #title1
-
Title Box 2: #title2
-
Title Box 3: #title3
-
Description Box 1: #details1
-
Description Box 2: #details2 (collapse on load)
-
Description Box 3: #details3 (collapse on load)
Add text and image elements to your title and description boxes.
Button Elements:
-
Expand Button 1: #expand1 (hide on load)
-
Expand Button 2: #expand2
-
Expand Button 3: #expand3
-
Collapse Button 1: #collapse1
-
Collapse Button 2: #collapse2 (hide on load)
-
Collapse Button 3: #collapse3 (hide on load)
The Database
Optional: Accordian content can be linked to your database.
THE CODE
Page Code
export function expand1_click(event, $w) {
$w('#details1').expand();
$w('#expand1').hide();
$w('#collapse1').show();
}
export function expand2_click(event, $w) {
$w('#details2').expand();
$w('#expand2').hide();
$w('#collapse2').show();
}
export function expand3_click(event, $w) {
$w('#details3').expand();
$w('#expand3').hide();
$w('#collapse3').show();
}
export function collapse1_click(event, $w) {
$w('#details1').collapse();
$w('#expand1').show();
$w('#collapse1').hide();
}
export function collapse2_click(event, $w) {
$w('#details2').collapse();
$w('#expand2').show();
$w('#collapse2').hide();
}
export function collapse3_click(event, $w) {
$w('#details3').collapse();
$w('#expand3').show();
$w('#collapse3').hide();
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
