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

Question

希望这是一个简单的。

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

目前功能正常但按钮保持在同一位置。

一旦打开，“查看更少”按钮应低于内容正文。

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');
        }
    });
});

正如您在下面的图片中看到的那样..按钮状态发生变化但位置保持不变

希望这很简单并感谢您的帮助

Answer 1

在我看来，最简单的方法是有两个按钮，第一个是开始可见第二个被隐藏。点击隐藏的第一个按钮首先显示第二个，第二个点击隐藏第二个显示第一个。