JQuery Show More Link not revealing all hidden text for post

Question

I have a site that displays a number of stories from users when the page loads. I want to only display the fist 2 sentences of each story, with a show more link underneath which the user can press. I tried to incorporate the code from the accepted answer for this question link.

The top 2 rows are being hidden and the display is as I would want, but I can't get the jQuery attached to the link to fire and show all rows. Is it a selector error?

My Fiddle: link

Html (generated from an Ajax call on window load):

<div class="post">
    <div class="hideContent">
        <div class="post-text">
        Lorem ipsum dolor sit amet, ex mel graece iuvaret. Ius cu cetero nonumes complectitur, no clita accusam splendide pri. Ea sit tale democritum, ea meis rebum est..</div>
            <div class="post-action">
               <input type="button" value="Like" id="like_86_cmpq0" class="like">
               <span class="likesTotal" id="likes_86_cmpq0">0</span></div>
            </div>
<div class="showMore"><a href="#">Show more</a></div>
</div>

CSS:

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}

JQuery:

$(".showMore a").on("click", function() {

    var $this = $(this); 
    //var $content = $this.parent().prev("div.content");
    var $content = $this.closest("hideContent");
    var linkText = $this.text().toUpperCase();    
    
    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $content.switchClass("hideContent", "showContent", 400);
    } else {
        linkText = "Show more";
        $content.switchClass("showContent", "hideContent", 400);
    }

    $this.text(linkText);
});

EDIT:

JQuery that creates the html above:

$(window).on('load', function () {

    $.ajax({
      url: 'serverside/stories.php',
      method: 'POST',
      dataType: 'json',
      success: function(response) {

      $(".content").html("")
      $(".total").html("")

        if(response){
          var total = response.length;
          $('#intro') .append("<p>Get inspired by reading personal stories about anxiety</p>");
         }
        
        $.each(response, function() {
          $.each($(this), function(i, item) {

            var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
            $('.content').append('<div class="post"><div class="hideContent"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span class="likesTotal" id="likes_' + item.ID + '_' + item.UserID + '">' + item.CntLikes + '</span></div></div>' + '<div class="showMore"><a href="#">Show more</a></div></div>');
          });
        });
      }
    });
});

Answer 1

Need to add two JS script paths for the jquery codes and switchClass function to work. Besides, I have changed variable name from $content to content (not important). Also, I added var content = $this.parent().prev() for the switch class purpose.

$(".showMore a").on("click", function() {

  var $this = $(this);
  //var $content = $this.parent().prev("div.content");
  /* var content = $this.closest(".hideContent") */

  // Add this line
  // Change $content to content
  var content = $this.parent().prev()
  var linkText = $this.text().toUpperCase();

  //Edit: Add console log here
  //console.log(content[0].className);
  //Edit 2: Add console log here
  //console.log(content[0]);
  
  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    content.switchClass("hideContent", "showContent", 400);

  } else {
    linkText = "Show more";
    content.switchClass("showContent", "hideContent", 400);
  }

  $this.text(linkText);
});

.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 2em;
  transition: all 0.25s linear; /* Edit 3: Add transition on height*/
}

.showContent {
  line-height: 1em;
  height: auto;
  transition: all 0.25s linear; /* Edit 3: Add transition on height*/
}

<!-- jquery script path -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jqueryui script path-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="post">
  <div class="hideContent">
    <div class="post-text">
      Lorem ipsum dolor sit amet, ex mel graece iuvaret. Ius cu cetero nonumes complectitur, no clita accusam splendide pri. Ea sit tale democritum, ea meis rebum est..</div>
    <div class="post-action">
      <input type="button" value="Like" id="like_86_cmpq0" class="like">
      <span class="likesTotal" id="likes_86_cmpq0">0</span></div>
  </div>
  <div class="showMore"><a href="#">Show more</a></div>
</div>

Answer 2

Looking through similar code I have on my website I found the below solved the issue. Because the content div is a parent that is there when the page loads, before the Ajax request creates the rest of the html, I used this to attach to the showMore div. Thank you yinsweet for your help!

$(document).ready(function(){

$(".content").on("click",".showMore a", function() {

  var $this = $(this);

  var content = $this.parent().prev()
  var linkText = $this.text().toUpperCase();

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    content.switchClass("hideContent", "showContent", 400);

  } else {
    linkText = "Show more";
    content.switchClass("showContent", "hideContent", 400);
  }

  $this.text(linkText);
});

});