10

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');
});
4
  • 1
    see jquery animate() or css transition Nov 26, 2015 at 5:26
  • madalin thank you. Its a good solution, I have checked jquery animate() but I am not much familiar with jquery functions, So can you please help me in how I can add Toggle to same animate() function. Nov 26, 2015 at 5:29
  • See this demo is use full w3schools.com/jquery/jquery_fade.asp
    – Hemdip
    Nov 26, 2015 at 5:32
  • Accepted solution: length of my calculus-based, physics textbook for my BS. jquery.animate(), just a 1-line solution. May 11, 2020 at 0:18

5 Answers 5

23

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>

7
  • Thank you. This is easy for me by using CSS Nov 26, 2015 at 5:34
  • I can't understand the problem.
    – Mosh Feu
    Nov 26, 2015 at 5:49
  • I can not fix div height. Its creating problem in Responsiveness. Don't want to add media queries for every resolution for height Nov 26, 2015 at 5:57
  • Do you mean that ` max-height:250px; ` 250px is not enough?
    – Mosh Feu
    Nov 26, 2015 at 6:14
  • @Sharanpreet if this answer your question, please accept the answer so it will help to other people.
    – Mosh Feu
    Aug 22, 2018 at 8:00
1

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.

1
  • 1
    .animate() is a one-line call! What a great solution! I can't believe the accepted solution is as long as the textbook for my 4th-year, calculus-based physics class. Thanks! May 11, 2020 at 0:17
1

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');});
5
  • i don't think she uses jqueryUi Nov 26, 2015 at 5:34
  • She's using JQuery already, using JQuery UI wouldn't be a stretch and would present a lot of other helpful options.. original post didn't specify pure javascript or css solution as a need
    – tremor
    Nov 26, 2015 at 5:38
  • lets just load a library of couple of kb just to animate a div Nov 26, 2015 at 5:40
  • then why use jquery at all, you're picking at details and loading libraries isn't the evil it was in the days of 56k baud, please.. I simply provided an option that fits well with the existing code the OP posted, that is an extension to JQuery's toggleClass method, which the OP is using for her method. If a web developer has already fallen into using JQuery and is now working on animating divs - they're likely to want to go further so one might as well load that scary extra few KB and get a well documented API and easy to use toolkit.
    – tremor
    Nov 26, 2015 at 5:48
  • I am trying toggle but not getting same result. yes these fiddle examples working. but still not getting same result in my actual HTML. Might be due to some other issue. I will check.Thank you so much. Nov 26, 2015 at 6:03
0

I think what you are looking for is to change your toggle handler to fadeIn() or fadeOut().

In the parenthesis, define the time (default is ms I believe) for the transition.

This is handling elements. To handle classes your code on fiddle may work with some css3 transitions although it may not be best practice due to browser compatibility:

-webkit-transition:  0.4s ease;
-moz-transition:  0.4s ease;
-o-transition: 0.4s ease;
transition:  0.4s ease;
0

The CSS specification does not define a method to animate the height or width of an element from an absolute value to auto. This is because the browser can't not easily/cheaply mathematically calculate the real value of auto when doing expanding animation.

Most expanding or contracting animation involving auto rely on Javascript. What they do is set the height or width to auto, then get new element height and apply an animation using the obtained value.

I've updated your jsfiddle to show what I'm telling you. http://jsfiddle.net/pnjpj3uo/14/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.