Wix Tutorial - Text Box with Show More, using Wix Code
Wix Code can be used to create expandable text boxes with read-more links. You can do this with static text, which is text that you type directly into the text element, or you can use dynamic text, which is text from one of your collections. You can also choose to have a simple "Show More" button that disappears once the full text is displayed, or you can define the button to toggle between showing the full text and the short text.
Elements:
-
Expandable Text Element: #Text1
-
Show More / Show Less Button: #myButton
Wix Code:
let fullText;
let shortText;
$w.onReady(function () {
const shortTextLength = 200;
fullText = $w("#Text1").text;
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#Text1").text = shortText;
});
export function myButton_click(event) {
if ($w("#Text1").text === shortText) {
$w("#Text1").text = fullText;
$w("#myButton").label = "Show Less";
} else {
$w("#Text1").text = shortText;
$w("#myButton").label = "Show More";
}
}
Demo:
Folklore, legends, myths and fairy tales have followed childhood through the ages, for every healthy youngster has a wholesome and instinctive love for stories fantastic, marvelous and manifestly unre...
