how do I make an expandable box for my read more button?

Ask the community
,
1

I want to make this…

906×314 33.3 KB

into an expanded strip where the read more button just expands the strip its sitting on and the rest of the bio appears… I dont know anything about code. I used to know a couple things on myspace…but java script is way too intimidating.
can anyone here give me some step by step instructions with a code to copy paste? fingers crossed :pray:t4:

2

Hi!

Here in this forum we’re trying to provide assistance not by giving code solution, but with guidance and direction.
Here’s an article that might shed some light on the situation for you. Code instructions included.

Doron.

3

1334×945 45.8 KB

Hi Doron, this is what I saw when I clicked the link you provided.

4

This is being worked on and being improved, so this might be the reason why it has been taken down for now.

See this other recent post.
https://www.wix.com/corvid/forum/community-discussion/read-more-button-space-when-it-is-collapse

You can find many posts in this forum using the search function…
https://www.wix.com/corvid/forum/community-discussion/creating-a-show-more-button-for-a-text

In the meanwhile you can view other workarounds for it like here.
https://www.vorbly.com/Vorbly-Code/WIX-CODE-EXPANDING-COLLAPSING-TEXT-BOX

Or for a complete copy of the tutorial itself here.
https://www.wixcreate.com/text-box-with-show-more

5

“Show More” Button with Static 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 = 40;
// 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) {  //making sure that you have added the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}

“Show More/Show Less” Toggle Button with Static 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 = 40;
// 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) {  //making sure that you have added the onClick event in properties
// 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";
}
}
6

“Show More/Show Less” Toggle Button with Dynamic Text from dataset.

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;
    }
  }
});
}); //might need this extra line here

export function mybutton_click(event, $w) {  //making sure that you have added the onClick event in properties
// 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";
}
}
7

This is an old post and being closed, if you require more help with this then please add a new post.