As a design student, I am working on creating a family tree website where users can click on individual circles (ancestors) to view their lineage. Everything has been functioning smoothly so far, except for when attempting to display the lineage of specific ancestors. My code includes divs for individual ancestors nested within parent divs representing "generations." While my jquery functions properly, clicking on individual circles causes the subsequent divs to lose their "display:inline-block" property and appear stacked atop one another. Despite spending several hours trying to fix this issue, I have not been successful.
Below is the relevant code snippet:
HTML:
<div class="elevengen">
<div class="circle" id="louisa"></div>
</div>
<div class="tengen">
<div class="circle" id="hank"></div>
<div id="invisible"></div>
<div id="invisible"></div>
<div id="invisible"></div>
<div class="circle" id="helen"></div>
</div>
<div class="ninegen">
<div class="circle" id="hls1"></div>
<div id="invisible"></div>
<div class="circle" id="gransav"></div>
<div id="invisible"></div>
<div id="invisible1"></div>
<div class="circle" id="poppy"></div>
<div class="circle" id="grandma"></div>
</div>
CSS:
.elevengen{
margin:auto;
width:60px;
height:60px;
margin-top:50px;
}
.tengen{
margin:auto;
width:300px;
height:60px;
display:none;
}
.ninegen{
margin:auto;
width:420px;
height:60px;
display:none;
}
#louisa{
border-width:4px;
border-color: #8951a0;
margin:auto;
margin-top: 50px;
}
/*tengen*/
#hank{
display:inline-block;
border-color:#d14727;
}
/*ninegen*/
#hls1{
display:inline-block;
border-color:#e96238;
display:none;
}
#gransav{
display:inline-block;
border-color:#e96238;
display:none;
}
#poppy{
display:inline-block;
border-color:#6986c4;
display:none;
}
#grandma{
display:inline-block;
border-color:#6986c4;
display:none;
}
JQuery:
$('#louisa').click(function(){
$('.tengen').fadeTo(1000, 1.00);
});
$('#hank').click(function(){
$('#hls1, #gransav').fadeTo(1000, 1.00);
});
Thank you in advance for any assistance offered in resolving this issue!