How To Make Collapsible Comment Box Like Stackoverflow

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

Solution 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" })%>

<divid="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...
            }
            returnfalse; //Prevent default action
        });
    });

Solution 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?