mint.com javascript efecto de lista desplegable

Question

Necesito recrear un efecto que mint.com tiene en otro sitio web. Cuando vaya a la página de transacciones y haga clic en una de sus transacciones, aparecerá una pestaña debajo de la que dice editar detalles. Al hacer clic en esa pestaña, se desplegará un div exponiendo más detalles sobre la transacción. Ni siquiera sé cómo se llama este tipo de efecto, pero necesito saber para recrear algo así preferiblemente con jquery.

Hay algunas capturas de pantalla de lo que estoy hablando a continuación.

closed http://img710.imageshack.us/img710/4066/screenshot1qt.png

open http://img25.imageshack.us/img25/8140/screenshotiz.png

Answer 1

único que tendría que hacer es obtener la posición del elemento se ha hecho clic y mostrar un div bramido que .. por supuesto es necesario tener algo que se lleva toda la información extra y lo muestra .. así que lo primero que haría es crear un div en algún lugar de la página y ocultarlo

<div id="myEditRecordContainer" style="position:absolute; top: 0px; left: 0px; display: none"></div> 

entonces sería establecer el controlador de clic

$('.recordDiv').click(function(e){ 
    //get the position of the clicked element 
    var position = $(e.target).position(); 

    //set position of the div bellow the current element 
    $('div#myEditRecordContainer').css({"top" : position.top() + $(this).height() + "px", "left": position.left()}); 

    //some kind of method that will get or populate the extra information 
    //you can use the $.ajax() to get the html from a web service or something along those lines 
    var detailsHtml = GetExtraRecordDetails(); 
    $("div#myEditRecordContainer").html(detailsHtml); 

    //now display the div - we already set the css for the position 
    //correctly so it should just display where you wanted it 
    $("div#myEditRecordContainer").show(); 
}); 

y lo único que tendría que hacer en el botón "Ya he terminado" es llamada

$("div#myEditRecordContainer").hide(); 

después de presentar los cambios de rumbo :)

no tenía un montón de tiempo para dar quizás un ejemplo más detallado, pero esto fue lo mejor de mi cabeza lo que haría en este caso ...

Espero que al menos esto te dé una idea de lo que puedas hacer.

Answer 2

Aquí es un plugin de jQuery que hace precisamente eso: http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx