觸發手風琴可以通過自定義的 data-toggle 屬性來觸發。其中data-toggle值設置為 collapse，data-target="#折疊區標識符"。接下來我們來看一個簡單的示例：（六步）
第一步，設計一個面板組合，里面有三個折疊區：

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
</div>

你將看到這樣的一個效果：

第二步：給面板添加內容，每個面板包括兩個部分，第一個是面板標題 panel-heading，并且在這里面添加標題 panel-title。第二個部分是面板內容，也就是折疊區，使用 panel-collapse 樣式。

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">標題一</h4>
    </div>
    <div class="panel-collapse">
        <div class="panel-body">折疊區內容...</div>
    </div>
</div>
…

此時你將看到下圖這樣的效果：

接下來的步驟，見下一節的介紹。