I'm currently customizing an HTML tree view using CSS, and my goal is to have sublists smoothly slide down whenever a node is expanded.
Take a look at my streamlined index.html :
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="node">
Div-1
<div class="children">
<div class="node">
Div-1-1
</div>
</div>
</div>
<div class="node">
Div-2
</div>
</body>
</html>
Here's the script.js content :
$(document).ready(function() {
$('.node').click(function(event) {
$(event.target).toggleClass('expanded');
});
});
And this is the style.css specific styling :
.node {
border: solid 1px red;
}
.node > .children {
border: solid 1px lightblue;
overflow: hidden;
padding-left: 10px;
max-height: 0;
transition: max-height .5s ease-in;
}
.node.expanded > .children {
display: block;
max-height: 50px;
}
The output (view on plunkr1) looks good BUT it's not just the sublist sliding down—it's the entire tree revealing the sublist.
To address this, I made changes by wrapping the "children" div as follows:
<body>
<div class="node">
Div-1
<div class="childrenWrapper">
<div class="children">
<div class="node">
Div-1-1
</div>
</div>
</div>
</div>
<div class="node">
Div-2
</div>
</body>
Moreover, I adjusted the CSS like so:
.node {
border: solid 1px red;
}
.node > .childrenWrapper {
border: solid 1px lightblue;
overflow: hidden;
padding-left: 10px;
}
.node > .childrenWrapper > .children {
transform: translateY(-100%);
transition: transform .5s ease;
}
.node.expanded > .childrenWrapper > .children {
transform: translateY(0);
}
Now with improvements in place (check out plunkr2), the sublist slides properly. Although there's an issue with the wrapped div maintaining the sublist size preventing a neat presentation.
I'm stuck on finding a resolution for this. Any suggestions?