RoR - .js查看更多按钮（顶部）查看更少按钮（底部）

我有一篇文章，内容是被.js隐藏的内容。用户点击'查看更多'，显示正文内容，并且按钮更改为'查看更少'

此时功能正常工作，但按钮保持在同一位置。

“View Less”（查看较少）按钮应该放在内容体下方一次打开的位置。

article.html.erb（内容是隐藏的）

 <% article_id = "article-id-#{article.id}" %> 
      <div class="col-md-12 post-body"> 
       <button class="btn btn-primary article-view-more" type="button" data-toggle="collapse"data-target="#<%= article_id %>" aria-expanded="false" aria-controls="article-expand">View More</button> 
      <div class="collapse" id="<%= article_id %>"> 
       <p><%= article.body.html_safe %></p> 
      </div> 
      </div> 
     <%end%>

的application.js（用于按钮动作）

$(document).ready(function(){ 
$('.article-view-more').click(function(){ 
     var $this = $(this); 
     $this.toggleClass('article-view-more'); 
     if($this.hasClass('article-view-more')){ 
      $this.text('View More'); 
     } else { 
      $this.text('View Less'); 
     } 
    }); 
});

正如您可以通过以下..按钮状态的图像中看到变化，但位置保持不变