Collapsible Accordion - Multiple Accordions Open

by bizamajig

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<div id="MainMenu">
		<div class="list-group panel">
			<a href="#option-1" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">
				Item 3
			</a>
			<div class="collapse" id="option-1">
				<a href="#menu-option-1" class="list-group-item" data-toggle="collapse" data-parent="#menu-option-1">
					Option 1 <i class="fa fa-caret-down"></i>
				</a>
				<div class="collapse list-group-submenu" id="menu-option-1">
					<a href="#" class="list-group-item" data-parent="#menu-option-1">
						Option 1 a
					</a>
					<a href="#" class="list-group-item" data-parent="#menu-option-1">
						Option 2 b
					</a>
					<a href="#sub-menu-option-1" class="list-group-item" data-toggle="collapse" data-parent="#sub-menu-option-1">
						Option 3 c <i class="fa fa-caret-down"></i>
					</a>
					<div class="collapse list-group-submenu list-group-submenu-1" id="sub-menu-option-1">
						<a href="#" class="list-group-item" data-parent="#sub-menu-option-1">
							Sub sub item 1
						</a>
						<a href="#" class="list-group-item" data-parent="#sub-menu-option-1">
							Sub sub item 2
						</a>
					</div>
					<a href="#" class="list-group-item" data-parent="#menu-option-1">
						Option 4 d
					</a>
				</div>
				<a href="javascript:;" class="list-group-item">
					Option 2
				</a>
				<a href="javascript:;" class="list-group-item">
					Option 3
				</a>
			</div>
			<a href="#demo4" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">
				Item 4
			</a>
			<div class="collapse" id="demo4">
				<a href="" class="list-group-item">
					Option 1
				</a>
				<a href="" class="list-group-item">
					Option...

CSS

.list-group.panel > .list-group-item {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px
}
.list-group-submenu {
  margin-left:20px;
}
.panel-title:hover {
     cursor: pointer;
}
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}