acts_as_commentable_with_threading setup

_reply.html.erb

<% comments.each do |comment| %>  
  <div class="comments-show">
    <div class="comment">
      <p><%= comment.user.full_name %> <em>(<%= timeago_tag comment.created_at, limit: 5.years.ago %>)</em></p>
      <p><%= comment.body %></p>
      <div class="comment-nav"><span class="comment-reply">reply</span></div>
      <div class="reply-form">
        <%= form_for @new_comment do |f| %>
          <%= f.hidden_field :commentable_id, value: @new_comment.commentable_id %>
          <%= f.hidden_field :commentable_type, value: @new_comment.commentable_type %>
          <%= f.hidden_field :comment_id, value: comment.id %>
          <div class="field form-group">
            <%= f.text_area :body, class: 'form-control' %>
          </div>
          <div class="field form-group">
            <%= submit_tag "Post Reply", class: 'btn btn-primary' %>
          </div>
        <% end %>
      </div>
    </div>
    <%= render partial: "comments/reply", locals: {comments: comment.children.includes(:user)} %>
  </div>
<% end %>

comments.css

.comments-header {
  border-bottom: 1px dotted gray;
  margin-bottom: 10px;
}

.comments-container P{
  margin-bottom: 0px;
}

.comments-container .comment-nav {
  margin-left: 5px;
  margin-bottom: 10px;
}

.comments-container .comment-nav span {
  font-size: 10px;
  font-weight: bold;
  color: #888;
  text-decoration: underline;
  cursor: pointer;
}

.comments-container .comment-nav span:hover{
  text-decoration: none;
}

.reply-form {
  display: none;
}

.comments-show {
  margin-left: 25px;
}

comments.js

$(document).on('turbolinks:load', function() {
  $('.comment-reply').click( function(){
     $(this).closest('.comment').find('.reply-form').toggle();
  });
});