Show-More Link not working correctly

Discussion Ask a question
,
1

I am trying to use a show-more link with a dynamic dataset for the long description on my page. I have used the Corvid Tutorial on this still with no luck. Can someone look through my code and see whats going on?

webpage: https://www.dreamsbuilthere.com/makeoverkids/Caleb

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 = 3;
// set the fullText variable to be the text from the collection
fullText = $w(‘#dynamicDataset’).getCurrentItem().longDescription;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w(‘#longDescription’).collapse();
$w(‘#button8’).collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button
if (fullText.length <= shortTextLength) {
$w(‘#longDescription’).text = fullText;
$w(‘#button8’).collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(‘#longDescription’).text = shortText;
}
}
});

2

As it states on the tutorial, make sure that your dataset id is the name that you use, plus also make sure that the dataset field is correct and that the elements used on the page correspond to the elements names in the code and make sure that you add the onClick event in the properties panel for the button.

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text 

$w.onReady(function () {
$w("#dynamicDataset").onReady(function () {
  // how many characters to include in the shortened version
  const shortTextLength = 40;
  // set the fullText variable to be the text from the collection
  fullText = $w('#dynamicDataset').getCurrentItem().textField;
  // if no text to display, collapse the text element and the button
  if (!fullText) {
    $w('#myTextElement').collapse();
    $w('#myButton').collapse();
  } else {
  // if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button
    if (fullText.length <= shortTextLength) {
      $w('#myTextElement').text = fullText;
      $w('#myButton').collapse();
    } else {
    // create the shortened version of the text and display it in the text element
      shortText = fullText.substr(0, shortTextLength) + "...";
      $w('#myTextElement').text = shortText;
    }
  }
});
 
export function mybutton_click(event, $w) {
// check the contents of the text element 
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text

$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less"; 
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}
3

@givemeawhisky thank you for the response. I added the click button event and it is working now…well kind of. The button will show more/less, but when the page loads it is showing the full text, I would like it to load the short text.

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 = 150;
// set the fullText variable to be the text from the collection
fullText = $w(‘#dynamicDataset’).getCurrentItem().longDescription;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w(‘#longDescription’).collapse();
$w(‘#button8’).collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button
if (fullText.length <= shortTextLength) {
$w(‘#longDescription’).text = fullText;
$w(‘#button8’).collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(‘#longDescription’).text = shortText;
}
}
});

export function button8_click(event, $w) {
// check the contents of the text element
if ($w(“#longDescription”).text === shortText) {
// if currently displaying short text, display the full text

$w(“#longDescription”).text = fullText;
$w(“#button8”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#longDescription”).text = shortText;
$w(“#button8”).label = “Show more”;
}
}

4

You need to add the onReady for the dataset too.

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text 

$w.onReady(function () {
$w("#dynamicDataset").onReady(function () {