Javascript 向下滑动以显示更多内容

好的，我知道我以前做过，但是我从一次很长的自行车旅行回来两天了，我不记得最好的方法了。但我有一些内容，我想有一个链接，向下滑动以显示更多内容

我这里有一个演示：

哪一类做了我想做的，但我不能100%确定我需要使用

滑动切换

，而不仅仅是劫持CSS并添加高度来向下扩展它

以下是我的JS：

 $(".show-more").on("click", function() {
    $(".items").css("height","100%");
  });

以下是我的CSS：

.items {
  height:100px;
  overflow: hidden;
}

.wrapper {
  display: flex;
}

.show-more {
  margin: 10px auto;
  display: block;
  text-align: center;
}

这是我的HTML：

<div class="items">
  <div class="wrapper">
    <div class="thing">
      <h2>This title</h2>
      <p>A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p>All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
      <p></p>
    </div>
    <div class="thing">
      <h2>This title</h2>
      <p>A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p>All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
    <div class="thing">
      <h2>This title</h2>
      <p>A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p>All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
  </div>

</div>
 <a class="show-more" href="#">Show More</a>

这个标题
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王

所有人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死


这个标题
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王

所有人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死

这个标题
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王

所有人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死

再一次，我试着让它像一个

幻灯片切换那样动画化。只是不确定是否最好做一些事情，比如，在上面钉一个类，然后做一个
切换类
，或者是否有更好的方法来实现它。
可能是您正在寻找的方法。以下是我的解决方案：


$（文档）.ready（函数（）{
$（“.show more”）。在（“单击”，函数（）{
$（“.extended content”）。向下滑动（1000）；
});
});
正文{
填充：20px；
}
.项目{
身高：100%；
}
.包装纸{
显示器：flex；
}
.展示更多{
利润率：10px自动；
显示：块；
文本对齐：居中；
}
.扩展内容{
显示：无；
}

这个标题
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王

所有男人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死
这个标题
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王

所有男人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死
这个标题
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王

所有男人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死
Hmm，好的，很酷。是的，我会搞砸的，看看我能想出什么。谢谢