Hi,
I am new to WIX, and have been playing around with some of the features for Show More and Show Less toggle using Javascript. The code works perfectly fine when I am on the editor and click on 'Preview', but does not seem to work when I choose to view the site using the 'Site Actions' > 'Preview Site' option.
Here is the java script that I am using:
//Code
let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text let fullTextEfficiency; // variable to hold the full text let shortTextEfficiency; // variable to hold the short version of the text $w.onReady(function () { // how many characters to include in the shortened version const shortTextLength = 121; // read the full text and store it in the fullText variable fullText = $w("#text20").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("#text20").text = shortText; const shortTextLengthEff = 173; fullTextEfficiency = $w("#text22").text; // grab the number of characters defined in shortTextLength and store them in the shortText variable shortTextEfficiency = fullTextEfficiency.substr(0, shortTextLengthEff) + "..."; // set the contents of the text element to be the short text $w("#text22").text = shortTextEfficiency; }); export function button1_click(event) { if ($w("#text20").text === shortText) { // if currently displaying short text, display the full text $w("#text20").text = fullText; $w("#button1").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text20").text = shortText; $w("#button1").label = "Show more"; } } export function button7_click(event) { if ($w("#text22").text === shortTextEfficiency) { // if currently displaying short text, display the full text $w("#text22").text = fullTextEfficiency; $w("#button7").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text22").text = shortTextEfficiency; $w("#button7").label = "Show more"; } }
//Code
@Rasna Ramdas OK - this is really cool. As far as I can tell, you've uncovered a bug in the editor. That's right - I the editor. The Preview Now option that you chose actually opens the editor in an "external preview" mode. That is, you're in the editor, but you don't see it.
I don't think you need to worry about this. Publish the site and you will see that when you run the published site everything works just fine.
I will report this bug to QA, but don't worry, it doesn't really affect your work.