Vorbly Code | WIX CODE EXPANDING COLLAPSING TEXT BOX

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX CODE EXPANDING COLLAPSING TEXT BOX

Need to summarize text for your Wix website? This tutorial will show you how to summarize long text paragraphs by expanding and collapsing text boxes. 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

Container Boxes:​

  • Box Container: #box1

  • Text Element: #text1

  • Button: #button1

Attach a text element and button to your box container.

THE CODE

Page Code

$w.onReady(function () {

 

    let length = $w("#text1").html.length;

    let long = $w("#text1").html;

    let short = $w("#text1").html.substr(0, 200) + "...";   // Set summary text length //

    $w("#text1").html = short;

    $w("#button1").onClick((event, $w) => {

        if (length > 200 && $w("#text1").html.length < length) {

            $w("#text1").html = long;

            $w("#button1").label = "Show Less";

 

        } else if (length > 200 && $w("#text1").html.length >= length) {

            $w("#text1").html = short;

            $w("#button1").label = "Read More";

        }

 

    });

 

});

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