Hi there, I am using the show more/less java code for the mobile version of my website (I don’t require this feature for my desktop version and so the button is hidden). While previewing the mobile version, all the functionality is working as expected. However on live published site, there is a huge gap between where the text ends and where the ‘show more’ button is being displayed. For some reason, the ‘show more’ button isn’t moving up to the end of text (see screenshots below). I have read all the other forum posts here about this same issue but nothing has helped so far.
I have a feeling the issue could be related to the text box layout on the desktop version of the site. I have one strip with two text boxes - column 1 and column 2. What I would like to do… again only on the mobile version of the site is hide column 2 and show only when the ‘show button’ is clicked.
Screenshot 1 - preview mode: no gap between text and ‘show more’ button
Screenshot 2 - published mode: huge gap between text and ‘show more’ button
PS: I have tried to to see if this is just a mobile related issue. But I have the same issue on desktop version too.
Code is here:
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
import wixWindow from ‘wix-window’;
if (wixWindow.formFactor === “Mobile”) {
$w.onReady( function () {
$w("#showbutton").show();
const shortTextLength = 75;
fullText = $w(“#text23”).text;
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(“#text23”).text = shortText;
});
}
export function showbutton_click(event) {
if ($w(“#text23”).text === shortText) {
$w(“#text23”).text = fullText;
$w(“#showbutton”).label = “Show less”;
} else {
$w(“#text23”).text = shortText;
$w(“#showbutton”).label = “Show more”;
}
}
Appreciate any help…thanks!
For starters, make sure that your code for show more/show less toggle or show more button is correct before you go looking at incorporating Wix Window API formFactor function too.
Code for the “Show More” Button
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 = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").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("#myTextElement").text = shortText;
});
export function mybutton_click(event, $w) { //making sure that you have added the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
Code for the “Show More/Show Less” Toggle Button
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 = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").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("#myTextElement").text = shortText;
});
export function mybutton_click(event, $w) { //making sure that you have added the onClick event in properties
// check the contents of the text element
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}
@givemeawhisky Thanks for your responses! I did copy the code directly from wix and it seems pretty straight forward. Don’t think that’s the issue. Anyways I’m going to try some different formatting combinations to see if that works. Thanks anyways.