How to make a "Read More" button in Javascript

Asked

Viewed 968 times

2

Hello.
I have this text:

Lorem ipsum dolor sit Amet, consectetur adipiscing Elit. Praesent aliquam vitae Elit in lobortis. Morbi tincidunt enim Elit, condimentum accumsan dolor lacinia Elementum. Proin magna nunc, interdum in posuere me, vestibulum sit Amet ante. In dictum justo at lorem rhoncus pretium. Vestibulum vel lorem quis ante tristique vulputate ut sit Amet libero. Donec in condimentum erat. Etiam et lorem at Metus malesuada pretium in a est. Lorem ipsum dolor sit Amet, consectetur adipiscing Elit. Praesent aliquam vitae Elit in lobortis. Morbi tincidunt enim Elit, condimentum accumsan dolor lacinia Elementum. Proin magna nunc, interdum in posuere eu, vestibulum sit Amet ante. In just dictum at lorem rhoncus pretium. Vestibulum vel lorem wanted before tristique vulputate ut sit Amet libero. Donec in condimentum erat. Etiam et lorem at Metus malesuada pretium in a est

And I need to create a Read More (Readmore) button using Javascript.
I need at first to appear only this size:

Lorem ipsum dolor sit Amet, consectetur adipiscing Elit. Praesent aliquam vitae Elit in lobortis. Morbi tincidunt enim Elit, condimentum accumsan dolor lacinia Elementum. Proin magna nunc, interdum in posuere me, vestibulum sit Amet ante. In dictum justo at lorem rhoncus pretium. Vestibulum vel lorem quis ante tristique vulputate ut sit Amet libero. Donec in condimentum erat. Etiam et lorem at Metus malesuada pretium in a est. Lorem ipsum dolor sit Amet, consectetur adipiscing Elit. Praesent aliquam vitae Elit in lobortis. Morbi tincidunt enim Elit, condimentum accumsan dolor lacinia Elementum. Proin magna

And when I hit the read button more all text appears.
How can I do that?

javascript jquery

  • If it is not what I posted, explain better and if possible, post the code of what you tried to do :D

  • See if the answer to this question does not serve https://answall.com/questions/169216/como-fazer-anima%C3%A7%C3%A3o-to-show-the-rest-of-the-pair%C3%A1graph

1 answer

2


$(document).ready(function() {
 
    var showChar = 100;  
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";
    

    $('.more').each(function() {
        var content = $(this).html();
 
        if(content.length > showChar) {
 
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);
 
            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
 
            $(this).html(html);
        }
 
    });
 
    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
.morecontent span {
    display: none;
}
.morelink {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
    <br><br>
    <div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
    </div>
  </body>
</html>

  • Thank you! That’s what I’m looking for.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.