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

2 thoughts on “How to make Collapsible comment box like Stackoverflow

  1. user

    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?

    Reply
  2. user

    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
            });
        });
    

    Reply

Leave a Reply

Your email address will not be published.