手风琴向上滑动然后向下滑动

Question

我正在尝试制作响应式标签/手风琴元素。它工作正常，但现在我需要在新内容向下滑动之前向上滑动的内容。我的codepen在这里：

http://codepen.io/mikehdesign/pen/jPmWza

HTML

<ul class="accordion-tabs">
  <li class="tab-header-and-content">
    <div class="tab-link"><h3>Tab 1</h3></div>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem.Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
    </div>
  </li>
  <li class="tab-header-and-content">
        <div class="tab-link"><h3>Tab 2</h3></div>
    <div class="tab-content">
      <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate.</p>
    </div>
  </li>
  <li class="tab-header-and-content">
        <div class="tab-link"><h3>Tab 3</h3></div>
    <div class="tab-content">
      <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.</p>    
    </div>
  </li>
  <li class="tab-header-and-content">
    <div class="tab-content">
      <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna.</p>
    </div>
  </li>
</ul>

SCSS

@import "bourbon";
@import "neat";

.accordion-tabs {
  $large-screen: em(860) !default;
  @include clearfix;
  padding: 0;

  .tab-header-and-content {
    list-style: none;

    @include media($large-screen) {
      display:inline;
    }
  }

  .tab-link {
    display: block;
    margin: 0;
    padding: 20px;
    width: 100%;
    background-color: pink;
    cursor: pointer;
    height: 200px;
    text-align: center;

    @include media($large-screen) {
      display: inline-block;
      width: 33.333333%;
      margin-right: -4px;
    }
  }

  .is-active {
    background-color: #BADA55;
  }

  .tab-content {
    display: none;
    width: 100%;

    p {
      margin: 0;
      padding: 0;
    }

    @include media($large-screen) {
      float: left;
    }
  }
}

JAVASCRIPT

$(document).ready(function () {

  $('.accordion-tabs').on('click', 'li > .tab-link', function(event) {
    if (!$(this).hasClass('is-active')) {
      event.preventDefault();
      var accordionTabs = $(this).closest('.accordion-tabs');
      accordionTabs.find('.is-open').removeClass('is-open').hide();

      $(this).next().toggleClass('is-open').slideToggle();
      accordionTabs.find('.is-active').removeClass('is-active');
      $(this).addClass('is-active');
    } else {
      event.preventDefault();
    }
  });
});