RoR - .js View More button (top) to View Less button (bottom)

Question

Hope this is a simple one.

I have a article with body content that is hidden by .js. User clicks on 'View More' and body content is shown and button changes to 'View Less'

At the moment the functionality works fine but the button stays in the same place.

Where the 'View Less' button should drop below the content body once opened.

article.html.erb (content that is hidden)

      <% 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 (for button action)

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

As you can seen by the images below.. the button state changes but position remains the same

Hope this is easy and thanks for the assistance

Answer 1

In my opinon the easiest way is to have two buttons, first is on start visible second is hidden. First button on click hide first show second, second on click hide second show first.