SlideDown issue when height is auto

SlideDown issue when height is auto

Hi guys,

I got to show correctly the content of my div (description). when i click  "Readmore" i show all the content, otherwise, i show only 40px of height.

i tried to make the view beauty by adding a slideDown and SlideUp but that's not working.

Can someone help me please ? thanks.

this is my code :
  1. $(document).ready(function($) {
  2.    var expanded = 0;
  3.    $(".description .readmore").on("click", function() {
  4.        if(expanded == 0) {
  5.            $(this).siblings(".showhalf").css("height", "auto");
  6.            $(".readmore").text();
  7.            expanded = 1;
  8.        } else {
  9.            $(this).siblings(".showhalf").css("height", "40");
  10.            $(".readmore").text()
  11.            expanded = 0;
  12.        }
  13.    });
  14. });
  15.       
  16. <div class="description">
  17. <p class="showhalf">
  18. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, eaque, facilis dicta       totam vel rem iure officia quisquam magnam nulla deleniti iusto inventore doloremque quia       ipsum saepe esse amet hic.
  19.       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, eaque, facilis dicta       totam vel rem iure officia quisquam magnam nulla deleniti iusto inventore doloremque quia       ipsum saepe esse amet hic.
  20. </p>
  21. <a href="javascript:;" class="readmore">read more ... </a>
  22. </div>