How to change link text on click with jQuery?

Question

Here is my codepen to see where I'm at. I want the "read more" to change to "read less" when the div expands and then back to "read more" when it closes, etc.

I thought maybe to check if the .expand-btn has class .view and then do a conditional to change the innerHTML but I didn't have much luck, maybe I'm just doing it wrong.

Any help would be appreciated.

$(".expand-container").each(function() {
  var _this = $(this);
  _this.find("a").click(function() {
    _this.find(".expand-text").toggleClass('expand');
    _this.find(".expand-btn").toggleClass('view');
  });

  if (_this.find(".expand-btn").hasClass("view")) {

  }
});

.col {
  width: 20rem;
}

.expand {
  max-height: 900px !important;
}

.expand-container {
  position: relative;
  width: 100%;
  height: auto;
}

.expand-text {
  position: relative;
  height: auto;
  max-height: 45px;
  overflow: hidden;
  transition: ease-in-out 0.25s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <h2>title1</h2>
  <div class="expand-container">
    <p class="expand-text">
      Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet
      nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt.
    </p>
    <a href="javascript:;" class="expand-btn">Read more</a>
  </div>
</div>

Answer 1

You can do it like this:

_this.find(".expand-btn").text((_this.find(".expand-btn").text() == "Read more" ? "Read less":"Read more"))

To better understand the above code, you can read the example below.

if(_this.find(".expand-btn").text() == "Read more") {
   _this.find(".expand-btn").text("Read less")
} else {
   _this.find(".expand-btn").text("Read more")
}

Demo

$(".expand-container a").click(function() {
  var _this = $(this);
  _this.prev(".expand-text").toggleClass('expand');
  _this.text((_this.text() == "Read more" ? "Read less" : "Read more")).toggleClass('view');
  _this.next('img').attr("src", _this.next('img').attr("src") == 'https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-up-thin.png' ? "https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-down-thin.png" : "https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-up-thin.png")
});

.col {
  width: 20rem;
}

.expand {
  max-height: 900px !important;
}

.expand-container {
  position: relative;
  width: 100%;
  height: auto;
}

.expand-text {
  position: relative;
  height: auto;
  max-height: 45px;
  overflow: hidden;
  transition: ease-in-out 0.25s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <h2>title1</h2>
  <div class="expand-container">
    <p class="expand-text">
      Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet
      nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt.
    </p>
    <a href="javascript:;" class="expand-btn">Read more</a><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-down-thin.png" style="height:10px;width:10px;" />
  </div>
</div>

Answer 2

No need for "each"

I do not see a class "view" so I ignored that for now

Add .toggleClass('view'); to the end of the $(this).text($text.hasClass("expand") ? "Read less" : "Read more") if needed

$(".expand-container").on("click","a",function(e) {
  e.preventDefault(); // cancel click
  const $text = $(this).prev(); // or  $(this).closest("div").find(".expand-text");
  $text.toggleClass('expand');
  $(this).text($text.hasClass("expand") ? "Read less" : "Read more")
});

.col {
  width: 20rem;
}

.expand {
  max-height: 900px !important;
}

.expand-container {
  position: relative;
  width: 100%;
  height: auto;
}

.expand-text {
  position: relative;
  height: auto;
  max-height: 45px;
  overflow: hidden;
  transition: ease-in-out 0.25s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <h2>title1</h2>
  <div class="expand-container">
    <p class="expand-text">
      Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet
      nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt.
    </p>
    <a href="#" class="expand-btn">Read more</a>
  </div>
</div>

Answer 3

if($('.expand-btn').text() === "Read More")
{ $('.expand-btn').text('Read Less') }
else if($('.expand-btn').text() === "Read Less")
{$('.expand-btn').text('Read More')}

You should use this for change text on button when button clicked.