基於bootstrap的內容折疊功能

加入js及css支持：

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

 

加入HTML代碼：

<div class="panel-group" id="accordion">
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" 
                              href="#collapseOne">
                              <p class="time">1 在線聊天室<a class="link" target="_blank"  href="#">演示</a><a target="_blank"  class="link" href="#">博文</a><a  target="_blank" class="link" href="#">代碼</a></p>
                            </a>
                          </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                          <div class="panel-body">
                            <p class="position">
                            <span class="tag orange">AngularJS</span><span class="tag green">Node.js</span>
                            <span class="tag pink">Express</span><span class="tag red">socket.io</span>
                            <span class="tag purple">Bootstrap</span>
                            </p>
        
                            <p>一個實時的在線聊天系統,包括廣播、群聊及私信功能。</p>
        
                            <p>后端采用Node.js+Express,前端MVVM框架采用AngularJS,界面構建使用Bootstrap,通信部分通過將socket.io包裝成AngularJS服務實現。</p>
                          </div>
                        </div>
                      </div>
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" 
                              href="#collapseTwo">
                               <p class="time">2 jQuery輪播插件<a target="_blank"  href="#" class="link">演示</a><a  target="_blank" href="#" class="link">博文</a><a href="#" class="link">代碼</a></p>
                            </a>
                          </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                          <div class="panel-body">
                            <p class="position"><span class="tag darkred">jQuery</span><span class="tag yellow">HTML</span><span class="tag lightblue">CSS</span></p>

                            <p>輪播插件,支持左右滑動和淡入淡出兩種效果。</p>

                            <p>擴展jQuery對象,為其原型$.fn添加輪播函數,實例化出的jQuery都擁有此函數。支持隱式迭代和鏈式語法。
                            其實現原理是使用jQuery提供的動畫函數不斷改變DOM節點的位置屬性值,達到輪播效果。</p>
                          </div>
                        </div>
                      </div>
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" 
                              href="#collapseThree">
                               <p class="time">3 個人博客<a target="_blank"  href="#" class="link">演示</a><a target="_blank"  href="#" class="link">博文</a></p>
                            </a>
                          </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse">
                          <div class="panel-body">
                            <p class="position"><span class="tag black">Ghost</span><span class="tag green">Node.js</span><span class="tag lightred">SQLite</span><span
                            class="tag pink">Express</span><span class="tag lightorange">Forever</span><span class="tag lightpurple">Handlebars</span></p>

                            <p>基於Ghost的個人博客系統,核心內容包括文章預覽、發表以及評論等功能。</p>

                            <p>基於Ghost博客系統開發，頁面由Handlebars模板引擎渲染，使用SQLite作為后台數據庫,目前通過Forever管理進程運行於Nginx服務器上。
                            應用了Media Query、字體圖標等技術，還引入了highlight.js高亮文章中的代碼。</p>
                          </div>
                        </div>
                      </div>
                    </div>

 效果圖：