Display item below row in table on click

I have a table displaying some information. What I'd like to accomplish is to allow the user to click on a row, and have the note related to the info in that row display below that row.

I am trying to set it up so that I can use the nifty CSS transition feature, so just putting the note in a hidden, absolutely positioned row below the info row is out of the question. CSS transition doesn't act on the position style.

I've got it set up so that the note will be in a div. When the user clicks a row in the table, an onClick event calls up a Javascript function which makes the div visible. Now all I need is for the div to line up under the selected table row.

How could I get the table row's height and position? I figure I could use that to position the div. Or, is there a better way to do this?

Here's an example of what I've got:

<style>
    .emarNote{
                transition: all .3s linear;
                -o-transition: all .3s linear;
                -moz-transition: all .3s linear;
                -webkit-transition: all .3s linear;
            }
</style>

<script type="text/javascript">
    function showEmar(id)
    {
        if (document.getElementByI开发者_开发知识库d("emarNote"+id).style.visibility == "hidden")
        {
            document.getElementById("emarNote"+id).style.visibility = 'visible';
            document.getElementById("emarNote"+id).style.opacity = 1;
        }
        else
        {
            document.getElementById("emarNote"+id).style.opacity = 0;
            document.getElementById("emarNote"+id).style.visibility = 'hidden';
        }
    }
</script>

<table>
    <tr onClick="showEmar(1)">
        <td>Info</td>
        <td>Info</td>
    </tr>
</table>

<div id="emar1" class="emarNote" style="visibility:hidden; opacity:0; position:absolute;">
    note about info
</div>

1st download JQuery. Then do something like below:

    <style>
    .emarNote{ background:#CCCCCC; }        
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.emarNote').hide();
    $('tbody', '#myTable').click(function(event) {
        tr_ID = $(event.target).parent().attr('id');
        $('#' + tr_ID + '-info').fadeToggle('slow');
    });
});
</script>

<table id="myTable">
<tbody>
    <tr id="row1">
        <td>Info</td>
        <td>Info</td>
    </tr>
    <tr>
    <td colspan="2" id="row1-info" class="emarNote">MORE INFO would be really cool and such</td>
    </tr>
    </tbody>
</table>

NOTE: Replace "fadeToggle" with "slideToggle" to acheive a slide effect. Also, I really think you should read up a bit on JQuery to fully understand the solution. You will find that it is actually quite easy to understand once you get the basics.