RoR - .jsもっと見るボタン（上）から見るボタン（下）

これは簡単なものです。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'); 
     } 
    }); 
});

変更内容が、位置が同じ