Skip to content

Instantly share code, notes, and snippets.

@gciampa

gciampa/index.html

Created February 17, 2011 04:20
Show Gist options
  • Save gciampa/830967 to your computer and use it in GitHub Desktop.
Save gciampa/830967 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Toggle Menu
Raw
index.html
<html>
<head>
<style type="text/css">
.nested {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#menu1').click(function() {
$('#menu1').next().slideToggle();
$('#menu2').next(':visible').slideToggle();
$('#menu3').next(':visible').slideToggle();
});
$('#menu2').click(function() {
$('#menu2').next().slideToggle();
$('#menu1').next(':visible').slideToggle();
$('#menu3').next(':visible').slideToggle();
});
$('#menu3').click(function() {
$('#menu3').next().slideToggle();
$('#menu2').next(':visible').slideToggle();
$('#menu1').next(':visible').slideToggle();
});
});
</script>
</head>
<body>
<ul id="menu">
<li id="menu1"><a href="#">Paper & Pencil</a></li>
<ul class="nested" id="nested-menu-1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<li id="menu2"><a href="#">Eyes & Ears</a></li>
<ul class="nested" id="nested-menu-2">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<li id="menu3"><a href="#">Lines & Dots</a></li>
<ul class="nested" id="nested-menu-3">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment