Всем привет. Ребят подскажите пожалуйста, как реализовать на jquery при помощи анимации такую логику: нажимаем на объект - появляется ниже еще один объект и т.д. ??? В примере ниже, например нажимаем на parant, появляется child - нажимаем на child появляется gnard child - код в качестве примера (не мой). Спасибо
<!DOCTYPE html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
.tree ul {
position: relative;
padding-top: 20px;
}
.tree li {
position: relative;
float: left;
padding: 20px 5px 0 5px;
list-style-type: none;
text-align: center;
}
/*We will use ::before and ::after to draw the connectors*/
/*
.tree li::before,
.tree li::after {
content: '';
position: absolute;
width: 50%;
height: 20px;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
}
.tree li::after {
left: 50%;
right: auto;
border-left: 1px solid #ccc;
}
*/
/*We need to remove left-right connectors from elements without any siblings*/
/*
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
*/
/*Remove space from the top of single children*/
/*
.tree li:only-child {
padding-top: 0;
}
*/
/*Remove left connector from first child and right connector from last child*/
/*
.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none;
}
*/
/*Adding back the vertical connector to the last nodes*/
/*
.tree li:last-child::before {
border-right: 1px solid #ccc;
}
*/
/*Time to add downward connectors from parents*/
/*
.tree ul ul::before {
content: '';
position: absolute;
width: 0;
height: 20px;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
}
*/
.tree li a {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover+ul li a {
background: #c8e4f8;
border: 1px solid #94a0b4;
color: #000;
}
/*Connector styles on hover*/
/*
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
border-color: #94a0b4;
}
*/
</style>
<head><title>Tree</title></head>
<body>
<div class="tree" style="width: 800px; height: 500px; overflow: hidden; border: 1px solid black;">
<ul>
<li>
<a href="#">Parent</a><div style="width: 1px; height: 20px; position: absolute; background-color: black; left: 50%;"></div>
<ul>
<li><div style="width: 1px; height: 20px; position: absolute; background-color: black; left: 50%; top: 0;"></div>
<a href="#">Child</a><div style="width: 1px; height: 20px; position: absolute; background-color: black; left: 50%;"></div>
<ul>
<li>
<a href="#">Grand Child</a>
</li><div style="width: 1px; height: 20px; position: absolute; background-color: black; left: 50%;"></div>
</ul>
</li>
</ul>
</div>
</body>
