Animation or transition is not working in overflow property

Question

I am giving transition of 4s in overflow property but it's not working. I am creating "show more", "show less" using css and jquery. Now when I click on show more the overflow:visible is showing but without any transition.

CSS:

$("#more").click(function() {
 $(".a").css("overflow","visible");
 $(".a").css("-webkit-transition","height 4s");
 $(".a").css("transition","height 4s");
 $("#less").show();
 $("#more").hide();
}); 
              
$("#less").click(function() {
 $(".b").css("overflow","hidden");
 $("#more").show();
 $("#less").hide();
});

    .a {
     position: relative;
     padding: 20px;
     border: 1px solid black;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     max-height: 387px;
     overflow: hidden;
    }
    
    .b {
     position: relative;
     min-height: 50px;
     border: 1px solid #aaa;
     margin-bottom: 2px;
     padding: 10px;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     text-align: center;
     overflow: hidden;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
     </div>
     <p id="more">See More</p>
     <p id="less">See Less</p>

Can you guys help me out?

Nandita Sharma · Answer 1 · 2018-06-17T16:55:20.150

Try applying animation to maxHeight instead of overflow.

$("#more").click(function() {
  $(".a").animate({
    maxHeight: "600px"
  }, 4000);
  $("#less").show();
  $("#more").hide();
});

$("#less").click(function() {
  $(".a").animate({
    maxHeight: "387px"
  }, 4000);
  $("#more").show();
  $("#less").hide();
});

.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 387px;
  overflow: hidden;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>
<p id="less">See Less</p>

showLess();

$("#more").click(function() {

  $(".a .b").removeAttr("style");

  $("#less").show();
  $("#more").hide();
});

$("#less").click(function() {
  showLess();
  $("#more").show();
  $("#less").hide();
});

function showLess() {
  var len = $(".a .b").length;

  for (var i = 5; i < len; i++) {
    $($(".a .b")[i]).css({
      "font-size": 0,
      padding: 0,
      border: 0,
      height: 0,
      width: 0,
      "min-height": 0
    });
  }
}

.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  transition: all 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>
<p id="less">See Less</p>

No transition property doesn't work for auto height. Please read this post https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Nandita Sharma, Jun 17 '18 at 10:48
Actually my `class b div` is undefined, it's a dynamic div coming from JS calculations, that's why I don't want to set `maxHeight` numeric — Jason, Jun 17 '18 at 10:51
@Jason see my second snippet please. I have updated my approach in it. See if its more suitable to you — Nandita Sharma, Jun 17 '18 at 16:55

Ehsan · Answer 2 · 2018-06-17T11:47:28.780

Use max-height instead of overflow like this:

1) Best way :

$("#more").click(function() {
    $('.a').toggleClass('collapse');
    var name = ($(this).text() =='See More') ? 'See Less' : 'See More';
    $(this).text(name);
})

$("#more").click(function() {
 $('.a').toggleClass('collapse');
 var name = ($(this).text() =='See More') ? 'See Less' : 'See More';
 $(this).text(name);
})

.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 387px;
  overflow: hidden;
  -webkit-transition: max-height 4s;
  -moz-transition: max-height 4s;
  -ms-transition: max-height 4s;
  -o-transition: max-height 4s;
  transition: max-height 4s;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.collapse {
 max-height: 550px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>

2) Fix your way:

$("#more").click(function() {

  $(".a").css({
    WebkitTransition : 'max-height 4s ease-in-out',
    MozTransition    : 'max-height 4s ease-in-out',
    MsTransition     : 'max-height 4s ease-in-out',
    OTransition      : 'max-height 4s ease-in-out',
    transition       : 'max-height 4s ease-in-out',
    'max-height':"550px"
  });
  $("#less").show();
  $("#more").hide();

}); 


$("#less").click(function() {
  $(".a").css("max-height","387px");
  $("#more").show();
  $("#less").hide();
});

$("#more").click(function() {
                           
  $(".a").css({
    WebkitTransition : 'max-height 4s ease-in-out',
    MozTransition    : 'max-height 4s ease-in-out',
    MsTransition     : 'max-height 4s ease-in-out',
    OTransition      : 'max-height 4s ease-in-out',
    transition       : 'max-height 4s ease-in-out',
    'max-height':"550px"
  });
  $("#less").show();
  $("#more").hide();
}); 


$("#less").click(function() {
  $(".a").css("max-height","387px");
  $("#more").show();
  $("#less").hide();
});

.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 387px;
  overflow: hidden;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>
<p id="less">See Less</p>

@NanditaAroraSharma, questioner do'nt want it, and have not script.see qustioner's script please. — Ehsan, Jun 17 '18 at 10:37
Ok, but I hoped he/she would want that. You are right though but it seemed a logical issue to me so i fixed it too. :) — Nandita Sharma, Jun 17 '18 at 10:39
Yups works fine now. But again a doubt, why don't you write the transition property in CSS itself. that way you will not have to apply it in js and it will work similarly I think — Nandita Sharma, Jun 17 '18 at 10:47
@NanditaAroraSharma, Maybe the `Questiner` wants to know, how use `transition` in `javascrpt`.i try use `transition` in javascript like `Questiner`. — Ehsan, Jun 17 '18 at 10:52

score -1 · Answer 3 · answered Jun 17 '18 at 10:55

What are you doing. You want to transition the height and you are using the .show() method. For transition to work for the height property the height value has to change, but the .show() only changes the display. You should use a button or an anchor tag, then set the height property with .css() to give it a slide-down-up effect.

<style>
    .box {
        height: 20px;
        transition: height ease .4s;
        -webkit-transition: height ease .4s;
        .......
    }
</style>

<div class="box">
    <div class="contents">
        .........
    </div>
</div>
<a href="#" class="toggle-more">Show more</a>

<script>
    $(".toggle-more").click(function() {
        ($(this).html() === "Show more") && $(".box").css("height", "60px").html("Show less");
        ($(this).html() === "Show less") && $(".box").css("height", "20px").html("Show more");
    });
</script>

Animation or transition is not working in overflow property

3 Answers3