2

I'm a design student (hence the potentially bad habits in my code) and trying to build a family tree website where you can click on one circle (ancestor) and see their corresponding lineage. Everything has been working so far, except when I try to call up lineage for individual ancestors (versus calling up a whole generation).

I have the individual ancestors as divs nestled within a "generation" parent div. My jquery works, but when I do click on individual circles, the next divs lose their "display:inline-block" property and just show up stacked on each other. I've been working for the past several hours to fix it, to no avail.

Here's the relevant code:

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);
});

Sorry for the length of the post, just trying to be as clear as possible. Any and all help appreciated!

LSavage
  • 21
  • 2

2 Answers2

2

Just use .animate

$('#louisa').click(function(){
    $('.tengen').animate({opacity: 1}, 1000);
});
$('#hank').click(function(){
    $('#hls1, #gransav').animate({opacity: 1}, 1000);
});
0

Thanks, the animate answer didn't work (not sure why), but I ended up in the rabbit hole of stack overflow and found an answer that did work:

$("div").fadeIn().css("display","inline-block");

I think I needed to be deleting the display:inline-block in my css, and changing css to what I need it to be in my Jquery.

Thank you!

LSavage
  • 21
  • 2