Search code examples
javascriptjqueryhtmljquery-animateslidetoggle

Animate Height Toggle for Read More/Less

I'm having a lot of trouble with this. I need to make these Read More/Less buttons change so the words "Read More" change to "Read Less" when the text is expanded and back again. I've tried using readmore.js but I can't get it to work. So I'm trying to do my own thing. But even that isn't working because I'm not that good at Javascript. Here is what I got. I know it's terrible. Thanks for any help you have give. I also need to make it so the button only works for the div above it. Not all of them.

HTML

<html>

  <head>
    <title>jQuery Read More/Less Toggle</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
            $(".btn1").click(function(){
                $(".more").animate({height: "290"});
        });

            $(".btn2").click(function(){
                $(".more").animate({height: "90px"});
            });
        });
    </script>
    </head>

  <body>
    <div class="container">
        <div class="more" id="more1">
          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.  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.  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>
        <div class="btn1" for="more1">
            <p class="btn_text">Read More &#8897</p>
            ______________________________________________
        </div>
        <div class="btn2" for="more1">
            <p class="btn_text">Read Less &#8896</p>
            ______________________________________________
        </div>
    </div>
    <div class="container">
        <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.  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.  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>
        <div class="btn">
            <p class="btn_text">Read More &#8897</p>
            ______________________________________________
        </div>
        <div class="btn2" for="more1">
            <p class="btn_text">Read Less &#8896</p>
            ______________________________________________
        </div>
    </div>
  </body>

</html>

CSS

.more {
    width: 600px;
    overflow: hidden;
    height: 90px;
}

.btn1 {
    cursor: pointer;
    width: 500px;
}

.btn2 {
    cursor: pointer;
    width: 500px;
}
.btn_text {
    margin-bottom: -10px;
}
Solution

  • Try to use .data() to set/get the expand state and also use .html() to toggle text,

    $(document).ready(function () {
    $('.btn').data("expanded",false);
    $(".btn").click(function () {
        var val = $(this).data('expanded');
        $(this).data('expanded', !val);
        $('p', this).html(val ? "Read More &#8897" : "Read Less &#8896");
        $(".more",$(this).closest('.container')).animate({
            height: val ? '90' : "290"
        });
    });
});

    DEMO