хочу сделать многоуровневое меню аккордеон
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading7">
<a class="collapsed list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7">Станки <i class="fa fa-angle-down" aria-hidden="true"></i></a>
</div>
<div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
<a class="list-group-item" href="#">Плиткорезы</a>
<a class="list-group-item" href="#">Пылесосы</a>
<div class="panel-heading" role="tab" id="heading9">
<a class="collapsed list-group-item" data-toggle="collapse" data-parent="#heading9" href="#collapse9" aria-expanded="false" aria-controls="collapse9">Станки металлообрабатывающие <i class="fa fa-angle-down" aria-hidden="true"></i></a>
</div>
<div id="collapse9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading9">
<a class="list-group-item" href="#">Ленточные пилы</a>
<a class="list-group-item" href="#">Токарные станки</a>
<a class="list-group-item" href="#">Токарно-фрезерные станки</a>
<a class="list-group-item" href="#">Фрезерные станки</a>
<a class="list-group-item" href="#">Сверлильные станки на магнитной подошве</a>
</div>
</div>
</div>
</div>
При клике по дочернему (вложенному) пункту меню, пункт закрывается (схлопывается) внутри родительского пункта, содержимое отображается только при повторном клике по родителю. Другими словами раскрываешь категорию "Станки", кликаешь на вложенную категорию "Станки металлообрабатывающие" родитель "Станки"схлопывается, а при повторном клике "Станки" открывает уже с раскрытой категорией "Станки металлообрабатывающие", то бишь как надо. Как от этого лишнего клика избавиться?