<div class="panel panel-default">
    <div class="panel-heading">
    </div>
    <div class="panel-body">
        <div class="collapse-group">
            <div class="controls">
                <button class="btn btn-primary open-button" type="button">
                    Open all
                </button>
                <button class="btn btn-primary close-button" type="button">
                    Close all
                </button>
            </div>
            <div class="row">
                @for (int i = 0; i < 5; i++)
                {
                    <div class="col-sm-4">
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" href="#@i" aria-expanded="true" aria-controls="collapseOne" class="trigger collapsed">
                                        @i
                                    </a>
                                </h4>
                            </div>
                            <div id="@i" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                                <div class="panel-body">
                                    body
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
    <div class="panel-footer"></div>
</div>




<style>
    body {
        margin: 50px;
    }

    a:hover, a:visited, a:link, a:active {
        text-decoration: none;
    }

    .controls {
        margin-bottom: 10px;
    }

    .collapse-group {
        padding: 10px;
        margin-bottom: 10px;
    }

    .panel-title .trigger:before {
        content: '\e082';
        font-family: 'Glyphicons Halflings';
        vertical-align: text-bottom;
    }

    .panel-title .trigger.collapsed:before {
        content: '\e081';
    }
</style>

<script>
    $(".open-button").on("click", function() {
        $(this).closest('.collapse-group').find('.collapse').collapse('show');
    });

    $(".close-button").on("click", function() {
        $(this).closest('.collapse-group').find('.collapse').collapse('hide');
    });
</script>