[教學] Bootstrap手風琴Accordion加入開合符號(純CSS版)

　　Bootstrap除了網格系統方便外，再來就是內建了各式的網頁常用的特效，除了導覽列、輪播外，再來就是Accordion手風琴效果，而這個手風琴可應用的地方相當的廣，像是產品展示、訊息公告外，甚至還可將它用於選單，因此這看似簡單的功能，就看使用者怎運用，更重要的是這個手風琴效果，完全不用寫任何的Javascript以及CSS，透過HTML就可快速的完成這個效果，甚至還可透過這HTML中的標籤屬性來作設定，因此深受梅干的喜愛。

　　但這麼好用的手風琴效果，有一個小小缺點就是，當今天將它展開時，卻沒有開合指示，因此這對於第一次使用的人，一時間則會有點搞不清楚，那一個是開，那一個關，但要在項目中，加入開合的指示符號，就知先知道，目前是那個項目開啟，才有辦法加入，因此這時就得透過javascript來進行偵測，但這對於javascript不熟的朋友，還真是一個苦差事，而現在有個更簡易的方法，直接透過CSS就可實現在手風琴效果中，加入開合的符號啦！且設定相當的簡單，有需要的朋友，現在也一塊來看看囉！

---

Step1
首先，先將Bootstrap的資源引用後，再把手風琴的HTML碼，放在body間。
[html]
<div class="panel-group" id="accordion">
<section class="panel panel-default">
<header class="panel-heading">
<h2 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#post1">
標題1
</a>
</h2>
</header>
<footer id="post1" class="panel-collapse collapse in">
<p class="panel-body">
內文
</p>
</footer>
</section>
<section class="panel panel-default">
<header class="panel-heading">
<h2 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#post2">
標題2
</a>
</h2>
</header>
<footer id="post2" class="panel-collapse collapse">
<p class="panel-body">
內文
</p>
</footer>
</section>
<section class="panel panel-default">
<header class="panel-heading">
<h2 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#post3">
標題3
</a>
</h2>
</header>
<footer id="post3" class="panel-collapse collapse">
<p class="panel-body">
內文
</footer>
</section>
</div>
[/html]

---

Step2
製作好後，再到瀏覽器中預覽時，就會看到一則一則的訊息。

---

Step3
接著再加入CSS的樣式，而這邊梅干使用最簡單的+-符號，當然這也可以更改為ICON FONT。
[css]
.panel-heading .accordion-toggle:before /展開時/{
content: "－";
}
.panel-heading .accordion-toggle.collapsed:before /合起來/{
content: "＋";
}
[/css]

---

Step4
當加入完畢後，剛的每一則訊息前方，就會出現+的符號，來提醒使用者這裡面還有東西，可以展開來預覽。

---

Step5
這時點開時，前方的符號就會從原來的+變成-啦！是不是超EZ的呀！

---

#範例展示(首則開啟)：

---

#範例展示(全關)：