網頁設計, 網頁資源

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

梅干2018/02/13
梅問題-[教學]Bootstrap手風琴Accordion加入開合符號(純CSS版)
  Bootstrap除了網格系統方便外,再來就是內建了各式的網頁常用的特效,除了導覽列、輪播外,再來就是Accordion手風琴效果,而這個手風琴可應用的地方相當的廣,像是產品展示、訊息公告外,甚至還可將它用於選單,因此這看似簡單的功能,就看使用者怎運用,更重要的是這個手風琴效果,完全不用寫任何的Javascript以及CSS,透過HTML就可快速的完成這個效果,甚至還可透過這HTML中的標籤屬性來作設定,因此深受梅干的喜愛。
  但這麼好用的手風琴效果,有一個小小缺點就是,當今天將它展開時,卻沒有開合指示,因此這對於第一次使用的人,一時間則會有點搞不清楚,那一個是開,那一個關,但要在項目中,加入開合的指示符號,就知先知道,目前是那個項目開啟,才有辦法加入,因此這時就得透過javascript來進行偵測,但這對於javascript不熟的朋友,還真是一個苦差事,而現在有個更簡易的方法,直接透過CSS就可實現在手風琴效果中,加入開合的符號啦!且設定相當的簡單,有需要的朋友,現在也一塊來看看囉!
Step1
首先,先將Bootstrap的資源引用後,再把手風琴的HTML碼,放在body間。
 <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>

Step2
製作好後,再到瀏覽器中預覽時,就會看到一則一則的訊息。
梅問題-[教學]Bootstrap手風琴Accordion加入開合符號(純CSS版)
Step3
接著再加入CSS的樣式,而這邊梅干使用最簡單的+-符號,當然這也可以更改為ICON FONT。
.panel-heading .accordion-toggle:before /*展開時*/{  
  content: "-"; 
}
.panel-heading .accordion-toggle.collapsed:before /*合起來*/{
content: "+";
}

Step4
當加入完畢後,剛的每一則訊息前方,就會出現+的符號,來提醒使用者這裡面還有東西,可以展開來預覽。
梅問題-[教學]Bootstrap手風琴Accordion加入開合符號(純CSS版)
Step5
這時點開時,前方的符號就會從原來的+變成-啦!是不是超EZ的呀!
梅問題-[教學]Bootstrap手風琴Accordion加入開合符號(純CSS版)
#範例展示(首則開啟):
#範例展示(全關):