Question

Scenario：A post has many comments. In the index page of posts, when user clicks the show link( link_to post), its comments will show below the post.

Here I use the append() to add the comments:
$('#edit_post_<%= @post.id %>').append('<%= j render "comments/comments" %>')So when user click the show link, comments would be load and show up.

But how can I hide these comments again (i.e to make comments toggeable) ?

posts/index

<h1>Posts</h1>
<% @posts.each do |post| %>
    <%= form_for post, remote: true do |f| %>
        <%=  post.content %>
        <div id="post_<%= post.id %>">
          <%= link_to "show", post, remote: true  %>
        </div>
    <% end %>
<% end %>

posts/show.js.erb

$('#edit_post_<%= @post.id %>').append('<%= j render "comments/comments" %>')

comments/_comments.html.erb

<% @comments.each do |comment| %>
    <%= comment.content %>
<% end %>

Answer 1

I suppose you dont have the event bindings for new comments.

you should use something like

$('.container-of-your-comments').on('click', '.the-toggle-button', function (e) {
  // toggle
});

so toggling works for all (also future) elements.

EDIT:

given the changes in the question: if toggle means just hiding the whole comment list,
you have to do it manually.

i suggest you have separate show / hide buttons (you can show and hide the buttons upon changing state as well), because if not, it gets more complex.

so for example, in posts/index:

<h1>Posts</h1>
<% @posts.each do |post| %>
    <%= form_for post, remote: true do |f| %>
        <%=  post.content %>
        <div id="post_<%= post.id %>">
          <%= link_to "show", post, remote: true %>
        </div>

        <div class="post-comments" id="post_comments_<%= post.id %>">
        </div>
    <% end %>
<% end %>

in comments/_comments.html.erb

<% @comments.each do |comment| %>
    <%= comment.content %>
<% end %>
<%= link_to "hide", '#', class: "hide-comments"  %>

and in posts/show.js.erb

$('#post_comments<%= @post.id %>').html('<%= j render "comments/comments" %>')

and in assets/javascripts/posts.js (be sure you include this in your application.js)

$(document).ready(function() {
    $('.hide-comments').click(function(e) {
      e.preventDefault();
      $(this).parent().hide();
    });
});

backbone.js is a great tool, if you’ll be doing a lot of things with those comments, like CRUD etc. and you need to stay on one page – use backbone.js. if not, stick to jQuery.