Skip to content

Instantly share code, notes, and snippets.

@balaclark

balaclark/gist:5698849

Created June 3, 2013 15:06
Show Gist options
  • Save balaclark/5698849 to your computer and use it in GitHub Desktop.
Save balaclark/5698849 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter Bootstrap nested stacked tabs.
Raw
gistfile1.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>test</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<style>
ul.nav-stacked > li > a > i {
float: right;
}
ul.nav-stacked ul.nav-stacked {
margin-bottom: 0;
}
ul.nav-stacked ul.nav-stacked > li > a {
padding-left: 2em;
}
ul.nav-stacked ul.nav-stacked > li:first-child > a {
border-radius: 0;
border-top: 0;
}
ul.nav-stacked ul.nav-stacked > li:last-child:visible > a {
border-radius: 0;
border-bottom: 0;
}
.nav-stacked > .active > a,
.nav-stacked > .active > a:hover {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc;
cursor: pointer;
}
</style>
</head>
<body>
<div style="margin:10px;width:300px">
<ul class="nav nav-tabs nav-stacked">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="nav nav-tabs nav-stacked">
<li><a href="#">Sub One</a></li>
<li><a href="#">Sub Two</a></li>
<li><a href="#">Sub Three</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li>
<a href="#">Four</a>
<ul class="nav nav-tabs nav-stacked">
<li><a href="#">Sub One</a></li>
<li><a href="#">Sub Two</a></li>
</ul>
</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script>
$.fn.naccordian = function () {
$root = this;
this.children('li').each(function () {
var $this = $(this),
$child = $this.find('.nav-stacked');
if ($child.length) {
$this.children('a').prepend('<i class="icon-plus">');
}
$child
.hide()
.parent()
.on('click', function (e) {
var child_was_visible = $child.is(':visible');
$root.find('.nav-stacked').not($child).hide();
$child.show();
if (child_was_visible && !$child.has(e.target).length) {
$child.hide();
}
});
$this.children('a').on('click', function () {
$root.find('.active').removeClass('active');
$(this).parent().addClass('active');
});
});
this.on('click', 'a', function (e) {
var $this = $(this),
$icon = $this.find('i'),
$child = $this.parent().find('.nav-stacked');
if ($this.siblings('.nav-stacked').length) {
$root.find('i').removeClass('icon-minus').addClass('icon-plus');
if ($child.is(':visible')) {
$icon.removeClass('icon-plus');
$icon.addClass('icon-minus');
}
}
});
};
$(function () {
$('.nav-stacked').naccordian();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment