Skip to content

Instantly share code, notes, and snippets.

@denisnazarov

denisnazarov/accordion-menu.css

Forked from anonymous/jsbin.UMiLOru.css
Created November 25, 2013 01:26
Show Gist options
  • Save denisnazarov/7634868 to your computer and use it in GitHub Desktop.
Save denisnazarov/7634868 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery accordion menu http://jsbin.com/UMiLOru/1/
Raw
accordion-menu.css
li > ul{
display: none;
}
Raw
accordion-menu.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
accordion-menu.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