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.
Can you please provide more details beyond "it does not seem to work". Did you Publish the site? What happens? What does it look like?