# I can't make Toggle Button "Show More/Show Less" 


**URL:** <https://forum.wixstudio.com/t/i-cant-make-toggle-button-show-more-show-less/19226>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [September 24, 2019, 10:25am UTC](https://forum.wixstudio.com/t/i-cant-make-toggle-button-show-more-show-less/19226 "2019-09-24T10:25:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahmedazadcxv](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ahmedazadcxv/32/14753_2.png) [@ahmedazadcxv](https://forum.wixstudio.com/u/ahmedazadcxv)\
**Post date:** [September 24, 2019, 10:25am UTC](https://forum.wixstudio.com/t/i-cant-make-toggle-button-show-more-show-less/19226/1 "2019-09-24T10:25:20Z")

</div>

hello everyone  
I can’t make Toggle Button “Show More/Show Less”

[https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code#working-with-dynamic-text](https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code#working-with-dynamic-text)

I used code  
let fullText;  
let shortText;  
[u]// For full API documentation, including code examples, visit [https://wix.to/94BuAAs[/u]](https://wix.to/94BuAAs%5B/u%5D)

$w.onReady(function () {  
 const shortTextLength = 40;  
 $w(“#dynamicDataset”).onReady(function () {  
 fullText = $w(‘#dynamicDataset’).getCurrentItem().description;  
 // if no text to display, collapse the text element and the button  
 if (!fullText) {  
 $w(‘#text5’).collapse();  
 $w(‘#button13’).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(‘#text5’).text = fullText;  
 $w(‘#button13’).collapse();  
 } else {  
 // create the shortened version of the text and display it in the text element  
 shortText = fullText.substr(0, shortTextLength) + “…”;  
 $w(‘#text5’).text = shortText;  
 }  
 }  
 });

});

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [September 24, 2019, 10:45am UTC](https://forum.wixstudio.com/t/i-cant-make-toggle-button-show-more-show-less/19226/2 "2019-09-24T10:45:07Z")

</div>

If you are using static text then your code would look like this.

Code for the “Show More” Button

```javascript
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();
}

```

Code for the “Show More/Show Less” Toggle Button

```javascript
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";
}
}

```

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [September 24, 2019, 10:48am UTC](https://forum.wixstudio.com/t/i-cant-make-toggle-button-show-more-show-less/19226/3 "2019-09-24T10:48:24Z")

</div>

For using dynamic text from a dataset your code would look like this.

```javascript
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

```

Followed with a line space and then either…

```javascript
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();
} 

```

Or this…

```javascript
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";
}
}

```

---

<div class="post-metadata">

**Author:** ![abronson](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@abronson](https://forum.wixstudio.com/u/abronson)\
**Post date:** [September 24, 2019, 12:15pm UTC](https://forum.wixstudio.com/t/i-cant-make-toggle-button-show-more-show-less/19226/4 "2019-09-24T12:15:41Z")

</div>

maybe you should check what $w(’ [#dynamicDataset](https://www.wix.com/corvid/forum/search/~num~dynamicDataset) ').getCurrentItem().description; result with console.log() first