positioning expanding collapsing box from a table cell with jquery

Question

Hello,

My question is if anyone knows how too achieve the effect of creating a slidedown from a tablecell, without having the whole table expand with.

It has too slide independantly from the location of that particular row on top off the table, so too speak

otherwise it looks ugly as you can see from my page (click on the first row) I placed the div inside the cell there

I think I have too find the position off the tablecell and position it on top off it, but I do not know how to do that yet.

this is the code I used for the slide:

$(".reg_info_body").hide();
$(".reg_info").toggle(function(){
$(this).children(".reg_info_body").slideDown(100);
}, function(){
$(this).children(".reg_info_body").slideUp(300);
});

thanks, Richard

Answer 1

If you use css to vertical-align: top; the cells of that table does that solve your problem?

Answer 2

simply add this to your style fro div:

position:fixed; width:400px;

.reg_info_body {
background-color:#F4F4F8;
height:200px;
padding:5px 10px 15px;
position:fixed;
width:400px;
z-index:100;
}

Tested in FF-FireBug

---

better still if you want to show hints or info to user about the field use jQuery Beauty Tip plugin. It is fantastic and I'm using it in my project :)