Skip to content

Instantly share code, notes, and snippets.

/jsbin.UMiLOru.css

Created November 25, 2013 01:26
Show Gist options
  • Save anonymous/7634865 to your computer and use it in GitHub Desktop.
Save anonymous/7634865 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.UMiLOru.css
li > ul{
display: none;
}
Raw
jsbin.UMiLOru.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li>Section 1
<ul>
<li>Subsection 1
<ul>
<li>Subsection 1
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 2
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 3
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
</ul>
</li>
<li>Subsection 2
<ul>
<li>Subsection 1
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 2
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 3
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
</ul>
</li>
<li>Subsection 3
<ul>
<li>Subsection 1
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 2
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 3
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Section 2
<ul>
<li>Subsection 1
<ul>
<li>Subsection 1
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 2
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 3
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
</ul>
</li>
<li>Subsection 2
<ul>
<li>Subsection 1
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 2
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 3
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
</ul>
</li>
<li>Subsection 3
<ul>
<li>Subsection 1
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 2
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
<li>Subsection 3
<ul>
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Raw
jsbin.UMiLOru.js
$('li').click(function(){
$(this).siblings('.active').each(function(){
collapse(this);
$(this).find('.active').each(function(){
collapse(this);
});
});
expand(this);
});
var expand = function(el){
$(el).addClass('active');
$(el).children(':first').slideDown();
};
var collapse = function(el){
$(el).removeClass('active');
$(el).children(':first').slideUp();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment