如何在Icon上展开面板主体并在面板标题上折叠？

Question

我想在应用程序中的panel body图标上单击Chevron并在面板标题上单击collapse。当前，面板主体在“图标”单击时正在扩展，但在标题单击时不会折叠。请帮助我。

样式

 .panel-heading .collapse-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: left;
    color: grey;
    padding-right: 1em;
}

.panel-heading .collapse-toggle.collapsed:after {
    content: "\e080";
}

剃刀视图

<div class="panel panel-default">
    <div class="panel-body">
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                @foreach (var item in Model)
                {
                <div class="panel-heading">
                 <span class="collapse-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#CustDetails_@(item.CustId)"></span>
                              @item.CustId
                           @item.CustName
                            @item.Salary

                        </div>

                    <div id="CustDetails_@(item.CustId)" class="panel-collapse collapse">
                        <div class="panel-body">
                            @item.CustDetails

                        </div>
                    </div>
                }
            </div>

        </div>
    </div>
</div>