I am currently working on designing an unordered list that serves as a family tree. My goal is to enable users to click on each section, triggering the appearance of a new div in the center of the screen containing relevant details about that specific person. Additionally, I aim to create functionality where users can close this div by clicking outside of it.
While exploring various jQuery solutions, none seem to perfectly align with my requirements.
Below is what I have developed so far:
HTML:
<div class="tree">
<ul>
<li>
<a href="chairman"><span class="accent">Chairman / Owner</span></a>
<p>Name</p>
<ul>
<li>
<a href="financemanager"><span class="accent">Finance &<br>
Managing Director</span><span>Name</span></a>
<ul>
<li><a href="financeteam"><span class="accent">Finance
Team</span> <span>Name</span><br></a></li>
<li><a href="salesdirector"><span class="accent">Sales
Director</span><span>Name</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
body {
width:100%;
}
* {margin: 0; padding: 0;}
ul {
line-height:20px;
}
.tree ul {
padding-top: 20px; position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
...
<span class="accent">
...