Skip to content

Instantly share code, notes, and snippets.

@dehart

dehart/tree

Created August 14, 2013 15:08
Show Gist options
  • Save dehart/6231956 to your computer and use it in GitHub Desktop.
Save dehart/6231956 to your computer and use it in GitHub Desktop.
Download ZIP
Tree transition
Raw
tree
<html>
<head>
<title>Nooooo!</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
li {
position:relative;
}
a.collapsed + ul {
opacity: 0;
-webkit-transform: scaleY(0);
max-height:0%;
}
li ul {
-webkit-transform: scaleY(1);
transition: all 0.26s ease;
-webkit-transform-origin: top;
max-height: 100%;
}
</style>
</head>
<body><h1>It doesn't work!</h1>
<p>This is the default web page for this server.</p>
<p>The web server software is running but no content has been added, yet.</p>
<p>
<ul>
<li><a href="#">root</a></li>
<li><a href="#">root</a></li>
<li><a href="#">root</a>
<ul>
<li><a href="#">root1</a></li>
<li><a href="#">root1</a></li>
<li><a href="#">root1</a></li>
<li><a href="#">root1</a></li>
<li><a href="#">root1</a></li>
<li><a href="#">root1</a></li>
<li><a href="#">root1</a></li>
<li><a href="#">root1</a></li>
<li><a href="#">root1</a></li>
</ul>
</li>
<li><a href="#">root</a></li>
<li><a href="#">root</a></li>
</ul>
</p>
<script>
$('ul a').click(function(e){ $(this).toggleClass('collapsed');});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment