Jquery 单击后如何将折叠按钮移动到底部？

我正在使用引导创建一个卡，可以扩展点击。为此，我使用了塌陷。但当我使用“折叠”时，按钮保持不变，而我希望它移动到卡的底部。底部的图片也应该非常清楚地说明我正在尝试做什么

单击“折叠”时如何向下移动按钮？我必须使用Javascript吗

谢谢你阅读这篇文章

名称名称名称
2019年8月21日
平均评级（4.5）
与流行的观点相反，Lorem Ipsum并非如此
内容在这里

重组div所需的一切，在何处说明您需要显示的主动性和onClick event show more

HTML:

---

这里是演示：

将附加内容移动到卡页脚上方的单个

折叠

div中

名称名称名称
2019年8月21日
平均评级（4.5）
与流行的观点相反，Lorem Ipsum并非如此
更多
与流行的观点相反，Lorem Ipsum并非如此
... （此处有其他内容部分）

只需将可折叠潜水器放在锚点上方即可

<div class="container">
  <div class="row">
    <div class="col-2">
      <!-- horizontal spacing -->
    </div>
    <div class="col-8 ">
      <div class="card text">
        <div class="card-header">
          <div class="row">
            <div class="col-3">
              <div class="text-primary"> Name Nameson </div>
            </div>
            <div class="col-6">
              <!-- horizontal spacing -->
            </div>
            <div class="col-3">
              <div class="float-right text-secondary"> Aug 21 2019 </div>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="inital">
            <h5 class="card-title">Average Rating (4.5) </h5>
            <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
          </div>
          <div class="ondemand">
            <div class="section">
              <h5 class="card-title">Average Rating (4.5) </h5>
              <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this</p>
            </div>
            <div class="section">
              <h5 class="card-title">Average Rating (4.5) </h5>
              <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this</p>
            </div>
            <div class="section">
              <h5 class="card-title">Average Rating (4.5) </h5>
              <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this</p>
            </div>
          </div>
        </div>
        <div class="card-footer text-muted text-center">
          <a href="#" class="btn" data-toggle="collapse" data-target="#review">
            <div class="row">
              <div class="showmore">Load more</div>
              <div class="showless">Show Less</div>
            </div>
            <span class="oi oi-caret-bottom"></span>
          </a>
          <div class="collapse" id="review">
            Content goes here
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

$(document).ready(function(){

  $('.ondemand').hide();
  $('.showmore').show();
  $('.showless').hide();

  $('.showmore').on('click', function(){
    $('.ondemand').slideDown("slow", "swing");
    $('.showmore').hide();
    $('.showless').show();
  });

  $('.showless').on('click', function(){
    $('.ondemand').slideUp("slow", "swing");
    $('.showmore').show();
    $('.showless').hide();
  });


});

         <div class="card text">
                <div class="card-header">
                    <div class="row">
                        <div class="col-3">
                            <div class="text-primary"> Name Nameson </div>
                        </div>
                        <div class="col-6">
                            <!-- horizontal spacing -->
                        </div>
                        <div class="col-3">
                            <div class="float-right text-secondary"> Aug 21 2019 </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title">Average Rating (4.5) </h5>
                    <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
                </div>
                <div class="collapse" id="review">
                    <div class="card-body">
                        <h5 class="card-title">More </h5>
                        <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
                    </div>
                    ... (additional content sections here)
                </div>
                <div class="card-footer text-muted text-center">
                    <a href="#" class="btn" data-toggle="collapse" data-target="#review">
                        <div class="row">
                            <div> Click to see full review </div>
                        </div>
                        <span class="oi oi-caret-bottom"></span>
                    </a>
                </div>
         </div>