基于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>

 效果图：