Adding read more toggle that increases height of div on button click

Question

I am trying to create a read more toggle that (upon clicking a button) toggles or expands the height of my div (id: #portfolio) to show all the text in it, and collapses back when clicked again.

My code looks absolutely fine but doesn't work correctly. When I click, it runs the animation but makes the div to slide out of visibility.

My 2nd issue is that toggling may not be ideal because I can only increase the height of the div to a specified height.

What I need is to make the div to expand to show all the text it contains (not to a specific height). ...(see attached image)

    $(document).ready(function(){
          $('button').click(function(){
             $("#portfolio").toggle(function(){
                $(this).animate({height:'360px'},500);
            },function(){
                $(this).animate({height:'50px'},500);
                });
                });
            });

 .outer{border:1px solid #000000; width:300px; height:500px}
    #portfolio{border:1px solid red; width:250px; height:50px; margin:1.5em; overflow:hidden}

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <div class="outer">this is main box
   <div id="portfolio">This is inner box <br /> Lorem ipsum dolor sit amet consectetur adipiscing elit, habitant sapien laoreet mi taciti in nunc semper, netus neque pulvinar aliquet diam convallis. Facilisi lacus felis integer sollicitudin luctus laoreet leo natoque, placerat sodales non porttitor accumsan arcu aliquet, sagittis risus potenti himenaeos dui inceptos aliquam. Sociosqu euismod in augue quisque at quis tempor facilisi ad, cubilia vivamus accumsan suspendisse venenatis sagittis class volutpat elementum, vestibulum lacus habitasse libero felis luctus consequat mattis.
 </div>
 <button id="#expandbtn">Read more Read less</button>
</div>
</html>

Please add actual html and css - not a picture of it (create a [mcve]) — Pete, Apr 24 '18 at 10:14
Possible duplicate https://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height — Pete, Apr 24 '18 at 10:17

Bambou · Accepted Answer · 2018-04-25T08:07:59.137

Is this what you're searching to do ? Run the snippet and tell me if it helped you

$(document).ready(function(){
  $('button').click(function(){
    if($('#portfolio').hasClass("readmore")) {
      $('#expandbtn').html('Read more');
      $('#portfolio').removeClass("readmore");
    } else {
      $('#expandbtn').html('Read less');
      $('#portfolio').addClass("readmore");
    }
  });
});

.outer{border:1px solid #000000; width:300px; height:500px}
#portfolio{border:1px solid red; width:250px; height:50px; margin:1.5em; overflow:hidden;}
.readmore{height: auto !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">this is main box
    <div id="portfolio">This is inner box <br /> Lorem ipsum dolor sit amet consectetur adipiscing elit, habitant sapien laoreet mi taciti in nunc semper, netus neque pulvinar aliquet diam convallis. Facilisi lacus felis integer sollicitudin luctus laoreet leo natoque, placerat sodales non porttitor accumsan arcu aliquet, sagittis risus potenti himenaeos dui inceptos aliquam. Sociosqu euismod in augue quisque at quis tempor facilisi ad, cubilia vivamus accumsan suspendisse venenatis sagittis class volutpat elementum, vestibulum lacus habitasse libero felis luctus consequat mattis.</div>
  <button id="expandbtn">Read more</button>
</div>

EDIT : Be careful you added a "#" at your button id To change the content just use the html function of jQuery : documentation here I edited my code just try my snippet again ! Wish i helped you

Yes this works fine, whats remaining is changing the button text which is supposed to toggle between "read more" and "read less". I will be handling it shortly. Thanks Kevin — emeka, Apr 24 '18 at 15:06

Adding read more toggle that increases height of div on button click

1 Answers1