To truncate a string to 150 characters and add "Learn more" or "Less more" at the end in JavaScript, you can use the substring() method to extract a portion of the string, and then concatenate the "Learn more" or "Less more" text and wrap it in a clickable span element.
In this example, we define a maxLength variable with a value of 150, and a description variable with a long string of text. We check if the length of the description is greater than maxLength, and if so, we truncate the string using the substring() method to extract the first 150 characters, and concatenate the "Learn more" text and wrap it in a clickable span element. We set the truncated description with the "Learn more" text as the content of an element with the id description.
We then add event listeners to the "Learn more" and "Less more" spans to toggle the display of the full or truncated description. When the "Learn more" span is clicked, we replace the content of the description element with the full description and "Less more" text. When the "Less more" span is clicked, we replace the content of the description element with the truncated description and "Learn more" text.
You can modify the maxLength value and the description string to suit your needs, as well as the text of the "Learn more" and "Less more" spans. Additionally, you'll need to add CSS styling to the .read-more and .read-less classes to make them look like clickable links.