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.

Please complete all required fields.
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

exactly the same issue

Praveen

May 31, 2021

0

The author did not explain this well.
Wix does not provide any means to assign an element with an ID name like we can in Elementor page builder for WordPress.

The code above has to target the element correctly by ID name. The # sign refers to an ID name in HTML.
What he used above in the code example were generic ID names to show the syntax examples of what to do.
That said,
• Create the elements as described,
• Once it is all created, save the page,
• Open in preview mode (not publish, preview),
• Right-click on top of the first element, a context menu to appears, click "inspect",
• The developer panel opens and it highlights the HTML tag for that element,
• Look inside the HTML tag for the ID name, it looks like this: id="name". It could be a number mixed with letters, whatever is there.
• That is the ID name for that element.
• Copy that ID name down (exactly as you see it),
• Continue with the other elements and do the same.
• When finished, return to the editor and change the "#(generic names)" according to what you found.
• Save the page.

If the code he gave above is correct, it should work now.
HTML tags look similar to this: <tagname></tagname>
The ID name inside a HTML tag is like this: <tagname id="name"></tag>
(Note: if there is no ID name, this will not work. It has to be an ID name in the HTML tag)

Mark

Sep 24, 2021

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP