Hi! I’m adding a “Demos” sub-page to an existing website, which is still a work in progress… in this sub-page, I want to showcase a few demo videos for prospective clients to review. As a sidebar item, I want to have an expandable text box that is partially revealed when the page loads, but which will be fully expanded when the “Show more” button is clicked and which will reduce back in size when the “Show less” button is clicked.
I carefully followed the Help instructions for the Wix Code Tutorial called “Creating a Show-More Link” I was 90% successful, but there are 3 things that I can’t get right.
Firstly; how can I get the “Show more” button to stick to the bottom of the Full Text and also to the Short Text when they shrink and expand on the page - the button is supposed to follow the verbiage… currently, the “Show less” button is at the bottom of the expanded Full Text, but when I select “Show Less”, the “Show more” button does not follow the text back up to its shorter self, and stays way down on the page. In the Editor, when I positioned the “Show more” box, I carefully tried to place its top in line with the bottom of the verbiage… is there some kind of a “sweet spot” on how to attach it properly? or any other advice on how to get it to behave nicely?
Secondly; how can I utilize mixed font attributes in my static text? I would like for the top part of the verbiage be bold and blue, with the rest of it being non-bold and black. But in Preview mode, it shows entirely in blue bold.
Thirdly; I accidentally “Published” my page that’s still in development, how do I un-
publish it? the Hide/Show feature didn’t quite work and now the header from the “demos” page shows up on the main page, which I won’t want to show up there anyway…
Thank you to anyone who can help me resolve these befuddling issues. At the bottom of this post, I am including my code for the demo page - maybe that is where I would set the font attributes?? I am new to this forum and I hope I asked my questions properly. I’m eager to learn and look forward to meeting other members of this exciting WixCode community.
Kind regards, Emily.
Here is the code for the expandable static text boxes on the Demo page:
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 28;
// read the full text and store it in the fullText variable
fullText = $w(“#text3”).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(“#text3”).text = shortText;
//TODO: write your page related code here…
});
export function button1_click(event) {
// check the contents of the text element
if ($w(“#text3”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text3”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text3”).text = shortText;
$w(“#button1”).label = “Show more”;
}
//Add your code for this event here:
}