Positioning hide/show element with absolute/relative positioning in play

[ShagenBake]

I am trying to work out the positioning for a grid layout that I am working on in which upon clicking an element another element within the parent element becomes slides down and becomes visible.

For each row I would like the overlay element that appears to essentially be right underneath each row of boxes. If you look at the following example the first row actually works how I would like. However because I have used absolute positioning for the element that is to appear it is not appearing underneath each row as intended due to the positioning. Obviously when switching to relative positioning I am then unable to keep the appearing element full width within the container and in a consistent position. Check out the jsfiddle here…

[http://jsfiddle.net/ShagenBake/ttpwF/6/](http://jsfiddle.net/ShagenBake/ttpwF/6/ “http://jsfiddle.net/ShagenBake/ttpwF/6/”)

The other way that I thought to do it is get into some math, negative or offset positioning or margins based on what element was being clicked and then taking into account the width of the element and padding and setting a CSS value to that. But as you may discover from my fiddle that could be a bit more than I am capable of. I know what I would like to do from a code perspective on that end but currently lack some of the skills to make it happen from the programming end of it all.

Thanks for your time and any suggestions, forks, updates, etc. you may put into this post. It is truly appreciated.

[JoniGiuro]

I’m not sure if I understand what you’re saying, is it something like
http://jsfiddle.net/ttpwF/9/

?

[ShagenBake]

That is pretty much exactly what I am looking for!!! Thanks so much.

So you some code to the script and determined the value of the current position of the row and then added 30 px to it to push the overlay box to be underneath the row? Similar to an idea I had but just did not know how to do it. Would love a brief explanation of your code as I am still new to jquery but undertand if you are busy and I will dig in when I get a free moment.

Thanks so much for you time and again, this is exactly what I was looking for at the moment. Have a great afternoon!

[Author]

Posts