mint.com javascript dropdown effect

Question

I need to recreate an effect that mint.com has on another website. When you go to the transactions page and click on one of your transactions a tab pops up underneath that says edit details. When you click on that tab a div will drop down exposing more details about the transaction. I don't even know what this kind of effect this is called but I need to know to recreate something like this preferably with jquery.

There are some screenshots of what I'm talking about below.

Answer 1

only thing you would need to do is get the position of the clicked element and display a div bellow it .. of course you need to have something that gets all the extra information and displays it .. so first thing I would do is create a div somewhere on the page and hide it

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

then I would set the click handler

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

and the only thing you would need to do on the "I'm done" button is call

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

after submitting the changes of course :)

I didn't have a whole lot of time to give maybe a more detailed example but this was just of the top of my head what I would do in this case ..

I really hope this at least gives you an idea as to what you can do.

Answer 2

Here is a jQuery plugin that does just that: http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx