Cómo hacer un cuadro de comentario plegable como Stackoverflow

Estoy creando un sitio y tengo una lista de actualizaciones de estado y quiero permitir que los usuarios escriban comentarios para cada uno de los elementos de la lista.

Sin embargo, estoy intentando implementar una interfaz de usuario similar a la forma en que funciona el desbordamiento de stack, específicamente el formulario / lista de comentarios plegable donde un usuario hace clic en agregar comentario sobre la actualización de estado específica en la lista, y debajo de ese elemento en la lista que muestra el formulario de entrada de comentarios arriba junto con los comentarios específicos ya publicados.

¿Cómo logro esto usando Jquery?

Nota: buscando también el ejemplo de marcado en otras palabras una muestra de trabajo. Gracias Y sí, si pudieras mostrar una devolución de Async, eso también sería bueno

Para cargar el contenido, simplemente puede conectar un evento de clic para rellenar un div mediante el método de carga.

Por ejemplo, en la vista podría tener algo como:

 <%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%>  

mientras que el javascript para conectar todo sería: –

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

El enfoque rápido (solo para mostrar / ocultar el área de comentarios) se asemejaría a algo como esto:

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

El sitio jQuery le proporcionará doco sobre diferentes enfoques, como fundidos, diapositivas u otras animaciones combinadas.

Su “Área de comentarios” que he usado en el ejemplo aquí probablemente sería una etiqueta

que contiene sus comentarios existentes, además del área de texto o texto en el que desea que los usuarios escriban sus respuestas.

¿Necesitas hacer una devolución de datos asincrónica?