I'm encountering a challenge while attempting to solve this issue. I have elements representing a child, parent, and grandparent. My goal is to determine the offset position of the child (positioned absolutely) in relation to the grandparent. However, here lies the complexity - the parent element must be positioned relatively as it functions as an accordion, causing the child elements to collapse along with it. If the parent is not left with a relative position, the absolute children will not collapse and remain static.
Currently, I am able to obtain the child's position in relation to the parent using jQuery:
// simple accordion
$('.accordion').on('click',function(){
$(this).next().slideToggle();
})
// get child offset
var childPos = $('.child').position();
console.log(childPos.top) // top position from granparent
CSS
.grandparent{
position:relative;
}
.parent{
position: relative;
padding:20px;
}
.child{
position: absolute
}
HTML
<div class="grandparent">
<div class="parent">
<div class="accordion">accordion</div>
<div class="child">
child content
</div>
</div>
<div class="parent">
<div class="accordion">accordion</div>
<div class="child">
child content
</div>
</div>
<div class="parent">
<div class="accordion">accordion</div>
<div class="child">
child content
</div>
</div>
</div>
Please provide any assistance you can offer!