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

1/4

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.

No comments. Be the first to leave a comment.

Many thanks!

dinhmanh3a

Jul 05, 2019

2

Hi dinhmanh3a, we are glad you like our Wix Code tutorial!

Andrew (Vorbly)

Jul 05, 2019

2

Bruh. This tutorial is so basic, there are much better ways of doing this.

Corvid Expert

Dec 15, 2019

1

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP