Creating a Show-More Link only for the mobile version

Discussion Ask a question
,
1

Hello. Doing my website I found out that in a full version the text looks good and there is no need to hide half of it. But in the mobile version the text is really long and you need to scroll it near 3 time to see what is after (picture gallery). Using that link (tutorial) I found out how to create expandable text, but found out that I need that option only in the mobile version. Can you please help me to make it full text and hidden button in the full version of the website and less text plus button (read more) in the mobile version? Thank you a lot in advance!
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link#part-1-setting-up-the-text-element-and-the-button

2

See:
https://www.wix.com/corvid/reference//wix-window.html#formFactor

3

Thank you. The problem is that i have never worked with codes and programming before. Just did my website with the cool and understandable WIX website builder, but even the “Creating a Show-More Link” programming was hard for me. So, the information from your link is something fantastic for me :*(

4

@bosenkonick post your current code

5

@jonatandor35 Thank you very much!!!

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 120;
// read the full text and store it in the fullText variable
fullText = $w(“#text8”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text8”).text = shortText;
});
export function button1(event) {
// display the full text
$w(“#text8”).text = fullText;
// collapse the button
$w(“#button1”).collapse();
}

6

@bosenkonick

import wixWindow from 'wix-window';
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
if (wixWindow.formFactor === "Mobile"){
// how many characters to include in the shortened version
const shortTextLength = 120;
// read the full text and store it in the fullText variable
fullText = $w("#text8").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#text8").text = shortText;
//I changed the onClick() a little bit:
$w("#button1").onClick(event => {
// display the full text
$w("#text8").text = fullText;
// collapse the button
$w("#button1").collapse();
})
} else {
$w("#button1").collapse();
}
});