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');
});

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. — Sharanpreet, Nov 26 '15 at 05:29
See this demo is use full http://www.w3schools.com/jquery/jquery_fade.asp — Hemdip, Nov 26 '15 at 05:32
Accepted solution: length of my calculus-based, physics textbook for my BS. `jquery.animate()`, just a 1-line solution. — HoldOffHunger, May 11 '20 at 00:18

Mosh Feu · Answer 1 · 2020-08-26T06:33:09.630

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.

After you click on the link once the animation will be so fast.
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>

I can not fix div height. Its creating problem in Responsiveness. Don't want to add media queries for every resolution for height — Sharanpreet, Nov 26 '15 at 05:57
@Sharanpreet if this answer your question, please [accept](https://stackoverflow.com/help/someone-answers) the answer so it will help to other people. — Mosh Feu, Aug 22 '18 at 08:00
@MoshFeu what expanding a the height to an unknown size? As in, I don't know if my div will have 4 images...or 15 images...and I need the expanding div to auto-adjust for the actual amount of content. — rolinger, Aug 26 '20 at 03:14
UX-wise, I'm not sure it's good idea to do long slide. Having said that, I've updated the answer. — Mosh Feu, Aug 26 '20 at 06:35

tremor · Answer 2 · 2015-11-26T05:59:16.227

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');});

edited Nov 26 '15 at 05:59

answered Nov 26 '15 at 05:31

tremor

3,068
19
37

i don't think she uses jqueryUi – madalinivascu Nov 26 '15 at 05: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 '15 at 05:38
lets just load a library of couple of kb just to animate a div – madalinivascu Nov 26 '15 at 05: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 '15 at 05: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. – Sharanpreet Nov 26 '15 at 06:03

score 1 · Answer 3 · answered Nov 26 '15 at 05:47

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.

answered Nov 26 '15 at 05:47

Harsh Sanghani

1,666
1
14
32

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! – HoldOffHunger May 11 '20 at 00:17

Charles · Answer 4 · 2015-11-26T05:33:39.387

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;

score 0 · Answer 5 · answered Nov 26 '15 at 06:07

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/

Expand div on click with smooth animation

5 Answers5

Linked