jQuery SlideDown jumps in Bootstrap 3 row

Question

I'm trying to make a div slide down (animating visible) with jquery. The animation isn't smooth and jumps in the end.

<div class="container">
  <div class="row">
    <ul class="items">
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
    </ul>
    <ul class="more-items">
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
    </ul>
  </div
  <div class="row">
    <a id="show-more-btn" class="show-more-items">
      <i class="glyphicon glyphicon-plus"></i>
      <span class="text">Vis flere</span>
    </a>
  </div>
</div>

It's a well known problem and is caused by jquery not knowing the height of the element to animate. So I made a function on document "ready" to calculate height of sliding element before hiding.

$(document).ready(function() {

  $('.more-items').css('height',function(i,h){
    alert(h);  
    $(this).hide();
      return h;
  });

  $("#show-more-btn").on("click", function(e) {
    e.preventDefault();
    $(".more-items").slideDown();
  });

});

This works perfectly but when element is inside a BS3 grid row the height is always 0px...

Why is this and how can I make sure that the element has a height inside the BS grid?

I'm not able to use the BS "collapse()" function because I can't load the BS js-file on the site I'm working on.

EXAMPLE Drag the window wide enough to see the 3 columns.
https://jsfiddle.net/vn1z6z9L/.

Answer 1

OK I found the solution! If I put col-sm-12 on the <ul> it gets a height. I don't even need to calculate it before hiding the .more-items list :-)

Updated jsfiddle: https://jsfiddle.net/vn1z6z9L/3/

<div class="container">
  <div class="row">
    <ul class="items col-sm-12">
      <li class="item col-sm-4">asf</li>
      <li class="item col-sm-4">dd</li>
      <li class="item col-sm-4">ssddf</li>
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
    </ul>
    <ul class="more-items col-sm-12">
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
    </ul>
  </div>