Bootstrap でパネルのオープン/クローズ

[2016.4.20 追記]

ui-bootstrapに以下よりも便利なuib-accordionのAccordionがあったので
そっちを使ったほうがいい
http://angular-ui.github.io/bootstrap/#/getting_started
http://plnkr.co/edit/?p=preview

---

Bootstrapベースで、パネルにオープン・クローズの機能を付けたい場合の備忘録

ページまたはCSSに以下を追加する
<style>
    /* Icon when the collapsible content is shown */
    .panel-heading a:after {
        font-family: "Glyphicons Halflings";
        content: "\e114";
        float: right;
        margin-left: 15px;
    }
    /* Icon when the collapsible content is hidden */
    .panel-heading a.collapsed:after {
        content: "\e080";
    }
</style>


<!--パネル -->
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">
            <a href="#panelCollapse" data-toggle="collapse">パネルタイトル</a>
        </h3>
    </div>
    <div class="panel-body">
        <div id="panelCollapse" class="collapse">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
    </div>
</div>

デフォルトでオープン、またはクローズにしたい場合は以下を追加

<script>
    $(function () {
        $("#panelCollapse").collapse('show'); //デフォルトでオープン
        $("#panelCollapse").collapse('hide'); //デフォルトでクローズ
    });
</script>