Dynamic Slidedown effect using jQuery reading data from a table

Question

I want to list some records from the table in a ASP.NET page. For each record, I want to display some data and at the same time, provide a button for them to click. I want to show a “CLICK TO VIEW BUTTON” If they click on the button, I want to have a box slide down (using jQuery) to display the other details for the record. An example of what I am looking for can be found here.

Sample of drop down

I would prefer to have one function to handle the details. I would like the box to appear right underneath each record and not at the bottom of the page. Is there a way to do this using jQuery? I was looking at the wrap, append but was not sure on how to go about implementing this.

Answer 1

Put the box in your ASP markup, but hide it:

<a href="javascript:showDetails(123);">Show details</a>
<div id="details123" style="display: none"></div>

Now implement a function to show/load:

function showDetails(recordId) {
    var detailsDiv = $("#details" + recordId);
    // load stuff -- replace this with whatever is 
    // appropriate for your app
    $.getJSON("/myapp/someJSONfunction?recordId=" + recordId,
        null,
        // this will be run if successful
        function(data) {
            if (data.value) {
                detailsDiv.text(data.value).slideDown();
            }
        }
    });
}