Show more and show less by Button

Question

I want to create a button named Read More

Which will display some more content when clicked. When it displays the content, the button text should be changed to be Read less .

 $(".read-more a").on("click", function() { var $link = $(this); var $content = $link.parent().prev("div.text-content"); var linkText = $link.text(); $content.toggleClass("short-text, full-text"); $link.text(getShowLinkText(linkText)); return false; }); function getShowLinkText(currentText) { var newText = ''; if (currentText.toUpperCase() === "READ MORE") { newText = "Read More"; } else { newText = "Read Less"; } return newText; } 

 div.text-container { margin: 0 auto; width: 75%; } .text-content{ line-height: 1em; } .short-text { overflow: hidden; height: 2em; } .full-text{ height: auto; } h1 { font-size: 24px; } .read-more { padding: 10px 0; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text-container"> <div class="text-content short-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div class="read-more"> <a href="#">Read More</a> </div> </div> 

Does anyone know how to fix this issue?

Any advice and/or help would be really appreciated.

---

(Here a jfiddle what I have tried)

Answer 1

I updated your answer. Please try this. https://jsfiddle.net/4cgbLne4/12/

<div class="text-container">
    <div class="text-content short-text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
    <div>
        <button href="#" class="read-more">Read More</button>
    </div>
</div>

$(".read-more").on("click", function() {
    var $link = $(this);
    var $content = $link.parent().prev("div.text-content");
    var linkText = $link.text();

    $content.toggleClass("short-text, full-text");

    $link.text(getShowLinkText(linkText));

    return false;
});

function getShowLinkText(currentText) {
    var newText = '';
        alert(currentText)
    if (currentText.toUpperCase() === "READ MORE") {
        newText = "Read Less";
    } else {
        newText = "Read More";
    }

    return newText;
}

Hope this will work for you.

Answer 2

I usually solve it without Javascript,

 .text-container { padding: 1em; border: 3px double; position: relative; padding-bottom: 3em; } .text-container .read-more { position: absolute; bottom: .5em; } input.read-more-toggle { display: none; } .read-more span { display: block; color: red; cursor: pointer; text-decoration: underline; } .read-more span:last-child { display: none; } input:checked + .read-more span:last-child { display: block; } input:checked + .read-more span:first-child { display: none; } .text-content { overflow: hidden; line-height: 1.5; } .read-more + .text-content { max-height: 3em; transition: max-height 1s; } input:checked + .read-more + .text-content { max-height: 50em; } 

 <div class="text-container"> <input type=checkbox id=more-text-toggle-1 class=read-more-toggle /> <label class="read-more" for="more-text-toggle-1"> <span>read more</span> <span>read less</span> </label> <div class="text-content short-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> </div> 

Answer 3

You can try this

HTML

<div class="text-container">
  <div class="text-content short-text">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div class="read-more">
    <button>Read More</button>
  </div>
</div>

Jquery

$(".read-more button").on("click", function() {

  var $content = $link.parent().prev("div.text-content");

  $content.toggleClass("short-text, full-text");

  if ($(this).text() == 'Read More')
    $(this).text('Read Less');
  else
    $(this).text('Read More');
  return false;
});

Example Fiddle - UPDATED

Answer 4

There is a mistake in toggling More and Less text:

 $(".read-more a").on("click", function() { var $link = $(this); var $content = $link.parent().prev("div.text-content"); var linkText = $link.text(); $content.toggleClass("short-text, full-text"); $link.text(getShowLinkText(linkText)); }); function getShowLinkText(currentText) { var newText = ''; if (currentText.toUpperCase() == "READ MORE") { newText = "Read Less"; } else { newText = "Read More"; } return newText; } 

 .short-text{color:#000000} .full-text{color:#ff8800} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text-container"> <div class="text-content short-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div class="read-more"> <a href="#">Read More</a> </div> </div> 

For <button> get text by .text() and set text by .html('text')

For <input type="button"> get text by .val() and set text by .val('text')

Answer 5

You only have to switch the "more" / "less" in your function:

function getShowLinkText(currentText) {
    var newText = '';

    if (currentText.toUpperCase().trim() === "READ MORE") {
        newText = "Read Less";
    } else {
        newText = "Read More";
    }
    return newText;
}

Fiddle: https://jsfiddle.net/4cgbLne4/5/

Answer 6

Just added one token into this and changed condition on click of a tag

var token = 1;
$(".read-more a").on("click", function() {
    var $link = $(this);
    var $content = $link.parent().prev("div.text-content");
    var linkText = $link.text();

    $content.toggleClass("short-text, full-text");

    $link.text(getShowLinkText(linkText));

        if(token == 1)
    {
        $(this).text("Read Less");
      token = 0;
    }
    else
    {
        $(this).text("Read More");
        token = 1;
    }

    return false;
});

Here is jsFiddle