balaclark/gist:5698849

## 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>
	<!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>