面板中的Bootstrap面板：单击内部面板时，两个字形都切换

Question

I have a bootstrap panel with another panel in it. Both have in the panel header a glyphicon. The panels are collapsed by default. When the panels are collapsed, the glyphicon-unchecked is set. When I click on this glyphicon, the panel uncollapses. I wrote following JavaScript function for this:

$('#outerPanelGlyph').click(function () {
    $('#outerPanelBody').collapse('toggle');
});

This works properly. When I click this, the outer panel gets uncollapsed but the inner is still collapsed. I wrote methods, so the glyphicon gets exchanged with "glyphicon-check" on uncollapse and vice versa:

$('#outerPanelBody').on('show.bs.collapse', function () {
    $('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});

$('#outerPanelBody').on('hide.bs.collapse', function () {
    $('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
 });

I wrote exactly the same code as above for the inner panel. When I click on the glyph of the inner panel, the inner panel gets uncollapsed and the glyph exchanged. But, when I click on the glyph of the inner panel again, the inner panel collapses and both the glyph of the inner panel and of the outer panel get exchanged. I just want the inner panel glyph exchanged when I click on the glyphicon of the inner panel.

Here is the HTML-Code:

<div class="panel panel-dark" id="outerPanel">
    <div class="panel-heading">
        <span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="outerPanelGlyph"></i></span>
    </div>
        ....some code....
    <div class="collapse panel-body" id="outerPanelBody">
        <div class="panel panel-default" id="innerPanel">
            <div class="panel-heading panel-dark">
                <span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="innerPanelGlyph"></i></span>
            </div>
            <div class="collapse panel-body" id="innerPanelBody">
                ....some code....
            </div>
        </div>
    </div>
</div>

Answer 1

When you click the inner panel, you also click the outer panel so you need to stop propagation in the inner panel click event otherwise both events will be fired.

$('#outerPanelBody').on('show.bs.collapse', function (e) {
    e.stopPropagation();
    $('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});

$('#outerPanelBody').on('hide.bs.collapse', function (e) {
    e.stopPropagation();
    $('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
});

Answer 2

The answer from Steve Harris does work, but he wrote it in the wrong method. Here are my new methods which toggle the glyph:

$('#outerPanelBody').on('show.bs.collapse', function (e) {
    e.stopPropagation();
    $('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});

$('#outerPanelBody').on('hide.bs.collapse', function (e) {
    e.stopPropagation();
    $('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
});

Thank you very much for the fast help!