Show partial content of UL then collapse with transition

Question

I've created a list that shows partial content and collapses with a trigger. Everything is working fine except I can't manage to make this works with CSS transition when it collapses. Basically, I toggle between 2 classes and apply a height: 100%

HTML

<div class="list">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
  </ul>
  <span class="more-less"></span>
</div>

CSS

.list.expand {
  height: 180px;
  overflow: hidden;
}
.list.expand.open {
    height: 100%;
  padding-bottom: 20px;
}

JS

var list = $(".list");
$(".more-less").click(function() {
    list.toggleClass("open closed"); 
});

I made CODEPEN to make some tests. I think this is a specific situation that needs a specific solution. I've spent hours trying snippets found here on Stackoverflow (CSS and JS) but without success.

neither CSS transition: height .5s ease; or .animate(height...) seems to work for me :/ So, any help or clue would be much appreciated :) Thanks

EDIT: I forgot a crucial information: The list content is loaded dynamically (WP), so that's why I need to set the height to "auto".

Answer 1

I found a better way to achieve this, with .scrollHeight

JS

var list = $(".list");

// variable storing an integer corresponding to the scrollHeight pixel value of the element.
var fullHeight = list[0].scrollHeight+'px';

if (list.height() > 100) {
  list.addClass("expand closed");
  list.height(100);
}

$(".more-less").on("click", function() {  
  if(list.hasClass("closed")) {
    list.animate({
      height: fullHeight
    }, 200);
  } else if (list.hasClass("open")) {
    list.animate({
      height: "100px"
    }, 200);
  }
  list.toggleClass("open closed");
});

CSS

.list.expand {
  overflow: hidden;
}

DEMO HERE on CodePen