Nested Bootstrap Sidebar item throwing the toys out - css

Question

With thanks to trevorp the basic side nav bar works perfectly. Then I needed to nest some menu items. This seems logical to me
<li class="collapsed active">
<div class="accordion-group">
<a data-toggle="collapse" data-target="#20"><i class="dropdown-toggle"></i>Accounting <span class="caret"></span></a>
<ul class="sub-menu collapse" id="20">
<li class="collapsed active">
<div class="accordion-group">
<a data-toggle="collapse" data-target="#21"><i class="dropdown-toggle"></i>Income <span class="caret"></span></a>
<ul class="sub-menu collapse" id="21">
<li>Customers</li>
</ul>
</div>
</li>
<li>Purchases</li>
<li>General Ledger</li>
<li>Banks</li>
<li>Invoicing</li>
<li>Financials</li>
<li>Utilities</li>
<li>Reports</li>
</ul>
</div>
</li>
But it produced this result
That just closes when clicked, instead of opening the li item... It's probably something very basic, but the art of staring at it hasn't produced any results yet :-)
I suspect clicking on the sub menu item is closing the parent, but no idea how to overcome that. No idea why the formatting is totally different either!
Thank you
======================= UPDATE =======================
If the second accordion-group div is removed it takes care for the blank menu item, and disabling the script
<script>
/* ensure any open panels are closed before showing selected */
$('.accordion-group').on('show.bs.collapse', function () {
$('.accordion-group .in').collapse('hide');
});
that closes the main menu items when another is opened now gives this result..
That now leaves two questions
How can I select a sub menu item without closing the accordion group?
How can I format the sub menu items in the same colour as the others (white not orange)?

Answer 1

Finally managed to find a way to solve question one
If there is a less verbose method I'd love to hear :-)
Add an onlick method to the sub-menu item
<li class="collapsed active">
<a onclick="holdCollapse();" data-toggle="collapse" data-target="#Menu_21" class="dropdown-toggle collapsed"><i class="fa fa-gift fa-lg"></i>Income </a>
<ul class="sub-menu collapse" id="Menu_21">
<li>Customers</li>
</ul>
</li>
and add a hidden field
<input type="hidden" value="0" id="HiddenField" />
add this script
<script>
function holdCollapse(e) {
$('#HiddenField').val('1');
}
and edit the original script
<script>
/* ensure any open panels are closed before showing selected */
$('.accordion-group').on('show.bs.collapse', function () {
var isSubMenu = $('#HiddenField').val();
if (isSubMenu == '0') {
$('.accordion-group .in').collapse('hide');
}
$('#HiddenField').val('0');
});