How to make Collapsible comment box like Stackoverflow

Question

I am building a site and I have a list of status updates and I want to allow the users to write comments for each of of the items in the list

However I am trying to implement a UI similar to the way stack overflow works specifically the collapsible comment form / list where a user clicks on add comment on the specific status update in the list, and below that item in the list the comment entry form shows up along with the specific comments already posted.

How do I accomplish this using Jquery?

Note: looking also for the markup example another words a working sample. Thanks And yes if you could show Async postback that would be nice too

Answer 1

To load the content you can just hook up a click event to populate a div using the load method.

For example in the view you could have something like:-

 <%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%> <div id="commentContainer" style="display:none;"> Loading... </div> 

while the javascript to hook everything up would be:-

  $(function() { $("#commentLink").click(function() { $("#commentContainer").toggle(); if ($("#commentContainer").is(":visible")) { $("#commentContainer").load($(this).attr("href")); } else { $("#commentContainer").html("Loading..."); //Or just leave it as is... } return false; //Prevent default action }); }); 

Answer 2

The quick approach (for just showing / hiding the comment area) would resemble something like this:

$(function(){
   $('#id_of_element_to_use_for_click').click(function(){
      $('#id_of_comment_area').slideToggle();
   });
});

The jQuery site will provide you with doco on different approaches such as fades, slides or other combined animations.

Your "Comment Area" I've used in the example here would likely be a <div> tag that contains your existing comments, plus whatever textarea or text input box you wanted users to type their answers into.

Do you need to do an asynchronous postback?