Expand Functionality Not Working As Expected

Ask the community
,
1

I added Javascript in order to add a few sections that expand when text is clicked. However, it seems to work inconsistently in the previewer - sometimes it works as expected and other times if does not work at all. Has anyone had a similar experience? Below is the code I’m using. Can I anyone see any errors with it?

export function showmore1_click(event) {
//Add your code for this event here:
$w(“#hiddentext1”).expand()
}

export function showmore2_click(event) {
//Add your code for this event here:
$w(“#hiddentext2”).expand()
}

2

All depends on what you are using the code for.

Simple collapsed on load and only shown when user clicks on button:

export function buttonShow_click(event, $w) {
$w(‘#imageWixLogo’).expand();

Hide and show elements depending on how users interact with the page like this:

export function mapBlue_onClick(event) {
	$w('#mapBlue').hide();
	$w('#mapDisabled').show();
	$w('#mapInside').show();
}

export function map_onMouseIn(event) {
	$w('#map').hide();
	$w('#mapBlue').show();

Or something that is only shown if member is logged in:

$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();

}
else {
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter ").show();

Or using the “Show More” Button like this:

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 = 40;  // you can change this number
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").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("#myTextElement").text = shortText;
});

export function mybutton_click(event, $w) { //make sure you have added the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
3

I’m using the code to have show more text that when some clicks “show more” a block of text appears. You can see an example in the screenshot below along with the corresponding code. Anything look off to you?

995×306 20.9 KB

export function showmore1_click(event) {
//Add your code for this event here:
$w(“#hiddentext1”).expand()
}

4

@christineamill

Then just use the code below and change element name ids to suit your own page.

Plus here is the tutorial for show more and show more/show less options:
https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link

“Show More” Button like this:

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 = 40;  // you can change this number
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").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("#myTextElement").text = shortText;
});

export function mybutton_click(event, $w) { //make sure you have added the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
5

Another option would be to use this option here that Nayeli (Code Queen) takes you through on her youtube video here along with the code for the page here .

Looking at your example pic above, then this might be a better option for you.

6

@givemeawhisky Thanks for the help! I appreciate it.

7

Only helpful if it works for you lol