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.

No comments. Be the first to leave a comment.

Hi there, my container doesn't collapse with the text box like it shows in this example. I'm also getting the error "'text1' is not a valid selector" on the first 5 lines of code but my text box is properly named in my properties panel. Can you help?

catherine

Apr 15, 2020

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP