Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX ACCORDIAN - STRIP STYLE

Need an accordian for your Wix website? 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/3

THE ELEMENTS

The Page

Strip Elements:

  • Title Strip 1: #title1

  • Title Strip 2: #title2

  • Title Strip 3: #title3

  • Content Strip 1: #details1

  • Content Strip 2: #details2 (collapse on load)

  • Content Strip 3: #details3 (collapse on load)

Add text elements and images to your title and content 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.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP