Show more/Hide button on long testimonial text on a carousel section

Site URL: https://bulldog-smilodon-7pdr.squarespace.com/services

Is there a way to only show the first paragraph of a testimonial slider and add a "show more" button that would trigger showing the rest of the text? Right now it's such a massive amount of text that takes up the entire screen.

Yes, you can definitely achieve this with a bit of JavaScript and CSS. Here’s a simple approach:

1. HTML Structure: Wrap your testimonial content in a <div> and include a "show more" button<div

class="testimonial">

    <p class="testimonial-text">This is the first paragraph of the testimonial. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="testimonial-more" style="display: none;">This is the rest of the testimonial that will be hidden initially.</p>
    <button class="show-more-btn">Show More</button>
</div>

CSS: Style the testimonial as needed. The hidden text is controlled by the display property.

You try this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
  const $textElement = $(".list-item-content__title");
  const tpfullText = $textElement.text().trim();
  const maxLength = 300;
  if (tpfullText.length > maxLength) {
    const truncatedText = tpfullText.substring(0, maxLength) + "...";
    $textElement.text(truncatedText);
    $textElement.after('<a href="#" class="show-more">Show more</a>');
    $(".show-more").on("click", function(e) {
      e.preventDefault();
      $textElement.text(tpfullText);
      $(this).remove();
    });
  }
});
</script>
<style>
  a.show-more {
    display: block;
    text-align: center;
    margin-top: 10px;
}
</style>

Result

and when click show more