I implemented the read more text box on our site. The button works- when you click it, it shows all the text. The button then changes to "read less" and if you click that, it shows less text.
The issue I am having is that on desktop, the read more button is at the bottom of the text box so it looks like there is a huge blank space. I want it to work like it does on mobile where the button (and all the content below it) sits under the text box.
Has anyone figured this out? Code is below...
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 = 704;
// read the full text and store it in the fullText variable
fullText = $w("#text6").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("#text6").text = shortText;
});
export function button2_click(event, $w) { // check the contents of the text element if ($w("#text6").text === shortText) { // if currently displaying short text, display the full text $w("#text6").text = fullText; $w("#button2").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text6").text = shortText; $w("#button2").label = "Show more"; } }
I have the same problem. The button works but won't move. I would also like objects below the text box (image galleries etc) to move up and down as the text box expands or collapses. Right now it just leaves a huge empty gap... Any solution to this?
https://kalleberglind.wixsite.com/website/project-01
Code works perfect for me...now how can this be expanded to work within a dynamic fashion so place in a repeater or not, but connected to dataset text? Can it find a way to read the dataset text and then replicate this same set up?
Hello
This answer might help !
Best
Massa
This may help to explain why there is a gap. https://www.youtube.com/watch?v=HmTkf5af0NE (3 min 30 sec)
*I'm having a similar issue. Can someone help?
My static text code and button codes work fine. But I have a huge gap between my bottom-most "Show More" button and footer. Why does the footer not move when I click to display full text
Thanks Dor! https://editor.wix.com/html/editor/web/renderer/edit/2fe1007a-fdc4-4ce5-be6c-70fc5985aada?metaSiteId=442b034d-3b3e-4ebe-88de-a2ccca47b306&editorSessionId=8b53f929-1f66-48e9-ab54-cb2ff9d5df91&referralInfo=dashboard
Hi Yael,
Can you post the link to the page where this happens ? I'll be glad to have look.
I'm having the same issue, and in Hebrew texts as well. The texts box's are positioned with no extra space between them but steel- the button remains at the bottom. Can you help? I've attached screen shots from both editor mode and preview mode. thank you.
Hi again,
For this to work, you need to make sure that the layout you see while editing the page is the one you expect to see when the short text is displayed. So in the editor, the button should be right below the text with no extra space between them.
This is true for the mobile version as well.
Can you guys please check if this helps ? If not, can you post a screenshot of the elements positioning as they are in the editor ?
I have the same issue. Everything works fine in the preview, but when it comes to the real thing, the text box does not collapse so it basically display the short text version in the long text version box that leave a large blank space to the next element.
My issue is more specific, I don't think its the code as it works on preview for both full site and mobile and it works on the published full site. The only place I am having issue is the mobile site.
I have been trying to play around with different arrangement and I managed to got it working by arranging the elements but can't remember what I did that really made it work. But after using the mobile site optimize feature, is is no longer working again and I can't seem to bring it back....
https://psl80643743.wixsite.com/mysite/about
Hey Anthony, can you explain the issue again and maybe add some screenshots if hey are relevant ?
Very clever! That wont work for my situation, but that's a really great way to solve it. Thanks for responding!
I to put things in 2 text boxes with a show more and show less buttons. I used the properties panel to collapse text on load and hide button on load. The Sample code below sets the correct series of events in motion.
export function button2_click(event, $w) { $w("#text1").expand(); $w("#button2").hide(); $w("#button1").show(); } export function button1_click(event, $w) { //Add your code for this event here: $w("#text1").collapse(); $w("#button2").show(); $w("#button1").hide(); }
What was the other solution you used? I'm having the same problem.
Thanks for the response! I ended up going with another solution so I can't post an image of the blank space.
Hey, can you please post a screenshot of the mobile vs desktop versions so we can see which blank space you refer to ?