expandable static text boxes with read-more links (giving me headaches!) ;-)

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? :slight_smile:

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:
}

Hey Emily!

Looks like the most practical way to deal with your problems would be to put your text in a box the size of your smaller layout and to use the .html property of your text instead of the .text property.

It would look something like this:

$w("text3").html = `<b style ="color:blue;font-size:16">All webinar recordings are produced under premium...</b>&nbsp;<p style ="color:black;font-size:16">Standard post-production editing...</p>`;

As for the published page, you can just set it to password protected.

Hi David, You are so kind to reply and I will try my hand at following your thoughtful suggestions…

No problem. I did forget to mention your code will need to be tweaked to interpret the html string. If your page isn’t dynamic you might be better off manually writing one long and one short string and simply switching between the two. If it is dynamic you’ll have to work with Regular Expressions.

Hi David, sadly I’m not a real programmer and don’t know how to tweak the code for it to interpret the html string or where to insert it into the flow of commands; at best I can follow exact instructions and hack a few things. I believe that my page is Static. Over the last 7 hours I’ve been bravely trying numerous ways to tweak and position and searching for answers via the forum, but alas, I have to admit I am lost. I am new to this group and fairly new to Wix and don’t know the top contributors yet (I noticed givemeawhiskey has a solid presence!), but I’d like to ask how if there is any way I can get some one-on-one help? I would be thrilled to pay someone (you?) to walk me through getting this page organized. Basically, I will need help with the FullText/ShortText, Font Attributes, Show more/Show less buttons (I want several of them in a column on the page), as well as some advise on layout for desktop and mobile. I’m a visual person and learn quickly by doing, but I need some basic help to get up to speed and over some initial humps. I can set up a screen sharing session via GoToWebinar, which would allow us to collaboratively work on my Wix pages in real-time. I have a business meeting mid-week this coming week, where I want to show this finished Demo page, which I will need to maintain as I add more demos (videos that I have produced) to it. What’s the best way to connect with you? I clicked on your “handle” but did not see any private way to communicate via chat or email. Please advise and thanks! :slight_smile:

Sure, I’d be glad to schedule something with you. Please contact me at this email.