Expand div on click with smooth animation

Question

I am trying to expand a div with speed/smooth animation. Right now div expands with sudden change, my requirement is to give smooth animation while expanding.

Fiddle code:

http://jsfiddle.net/Sharan_thethy/pnjpj3uo/3/

$('.click1').find('a[href="#"]').on('click', function (e) {
  e.preventDefault();
  this.expand = !this.expand;
  $(this).text(this.expand ? "Hide Content" : "Read More");
  $(this).closest('.click1').find('.smalldesc, .bigdesc').toggleClass('smalldesc bigdesc');
});

Answer 1

This is a css solution for modern browsers. (IE10 and higher)

document.querySelector('a').addEventListener('click', function() {
  document.querySelector('.smalldesc').classList.toggle('expand');
});

.smalldesc {
  max-height: 52px;
  overflow: hidden;
  transition: all .3s ease;
}

.smalldesc.expand {
  max-height: 250px;
}

<div class="service-1 click1">
  <div class="row">
    <div class="medium-12 small-12 columns smalldesc">
      <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <a href="#">Read More</a>
  </div>
</div>

Or, even better, using css only:

#expend {
  display:none;  
}

#expend + .smalldesc {
  max-height:52px;
  overflow:hidden;
  transition:all .3s ease;
}

#expend:checked + .smalldesc {
  max-height:250px;  
}

label {
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}

label:hover {
  text-decoration:none;  
}

<div class="service-1 click1">
<div class="row">
  <input type="checkbox" id="expend" />
  <div class="medium-12 small-12 columns smalldesc">
  <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <label for="expend">Read More</label>
</div>
</div>

Update: The great thing about max-height is that you haven't to know the exact height. if the element's height smaller than the value of the max-height property, the element still will get the right height. The max-height property just limit the height from the top.

Keep it in your mind that you can't just set the max-height to 10000px for example. I mean, you can but you shouldn't.

1. After you click on the link once the animation will be so fast.
2. Right now the max-height is 10000px. When you click again, you can't see the effect of the toggle until it will be less than the height of the div. In other words, after you click, nothing will not happen in some time.

Example:

document.querySelector('a').addEventListener('click', function() {
  document.querySelector('.smalldesc').classList.toggle('expand');
});

.smalldesc {
  max-height: 52px;
  overflow: hidden;
  transition: all 1s ease;
}

.smalldesc.expand {
  max-height: 10000px;
}

<div class="service-1 click1">
  <div class="row">
    <div class="medium-12 small-12 columns smalldesc">

      <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <a href="#">Read More</a>
  </div>
</div>

So, set the value of max-height to the tallest element could be, no more. If the gap is not too high, you won't feel a problem.

Following @rolinger's comment, as a compromise, you can get the element's original height (scrollHeight) and store it in a css variable. The max-height will take that variable as max-height.

const smalldesc = document.querySelector('.smalldesc');
smalldesc.style.setProperty('--originalHeight', `${smalldesc.scrollHeight}px`);

document.querySelector('a').addEventListener('click', function() {
  smalldesc.classList.toggle('expand');
});

.smalldesc {
  max-height: 52px;
  overflow: hidden;
  transition: all 1s ease;
}

.smalldesc.expand {
  max-height: var(--originalHeight);
}

<div class="service-1 click1">
  <div class="row">
    <div class="medium-12 small-12 columns smalldesc">

      <p class="font16">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <a href="#">Read More</a>
  </div>
</div>

Answer 2

I have some solution for you, But in that case you can not set hieght to auto, you can do following, replace you jquery code with these :-

$('.click1').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Hide Content":"Read More");

    $(this).closest('.click1').find('.smalldesc, .bigdesc').animate({
        "height": "400px"
    }, "slow");  
});

It may help you.

Answer 3

What you are looking for may be the "easing" argument defined in the JQueryUI ToggleClass API:

http://api.jqueryui.com/toggleClass/

There is also a duration that you can specify using toggle class. This should be what you are looking for.

Edit: This method requires JQuery UI to be loaded...

I updated your Fiddle adding JQuery UI and one little extra argument to toggleClass: https://jsfiddle.net/pnjpj3uo/13/

$('.click1').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Hide Content":"Read More");
$(this).closest('.click1').find('.smalldesc, .bigdesc').toggleClass('smalldesc bigdesc', 1000, 'swing');});