http://caibaojian.com/bootstrap/javascript.html

http://www.w3cschool.cc/jqueryui/example-accordion.html

http://www.cnblogs.com/Wayou/archive/2012/10/02/jquery_ui.html

<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
 <link
    href="${pageContext.request.contextPath }/css/jquery-ui-1.10.0.custom.css"
    type="text/css" rel="stylesheet" />
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.10.2.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/bootstrap.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-ui.min.js"></script>
</head>
<body>
  <script>
  $(function() {
    $( "#accordion1" ).accordion({
      collapsible: true
    });
    $( "#accordion2" ).accordion({
      collapsible: true
    });
    $( "#accordion3" ).accordion({
      collapsible: true
    });
    $( "#accordion4" ).accordion({
      collapsible: true
    });
  });
  </script>
</head>
<body>

<div id="accordion1">
  <h3>部分 </h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  </div>
  <div id="accordion2">
  <h3>部分 </h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
  </div>
 </div>
 <div id="accordion3">
  <h3>部分 </h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  </div>
  <div id="accordion4">
  <h3>部分 </h3>
  <div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  </div>
</div>

</body>
</html>

boostrap折叠，jquery ui accordion同时打开多个标签的更多相关文章

  1. jquery.ui.accordion的修改（支持展开多个）

    原文:jquery.ui.accordion的修改(支持展开多个) 背景:原jquery.ui.accordion插件,最多只能展开一个,不能展开多个,后来在网上找到了一个基于它的一个修改版(http ...

  2. Jquery UI accordion手风琴菜单

    最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> ...

  3. 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

    □ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...

  4. [转载]jQuery UI 使用

    最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助.文章结尾附源码下载. 1     jQuery UI 2     为我所用 2.1     Tabs 2. ...

  5. 关于jQuery UI 使用心得及技巧

    1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行j ...

  6. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  7. jquery ui的css设计

    jquery ui 是当前最强大的UI库之一,其两大卖点是对IE6的良好支持与换肤功能.为了构建avalon ui,今天起我将投入一部分精力来研究时下最流行的几个CSS框架.它是首当其冲. jquer ...

  8. jquery ui 怎么实现tab标签切换效果

    1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  9. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

    accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...

随机推荐

  1. filter应用案例一：分IP统计访问次数

    统计工作需要在所有资源之前都执行,那么就可以放到Filter中了.用Map<String,Integer>装载统计的数据.Map创建时间(使用ServletContextListener, ...

  2. cf429B dp递推

    Description Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to loo ...

  3. poj 1321 棋盘问题

    八皇后问题变形,回溯法. #include <cstdio> #include <cstring> #include <iostream> using namesp ...

  4. (转)ACM next_permutation函数

    转自 stven_king的博客 这是一个求一个排序的下一个排列的函数,可以遍历全排列,要包含头文件<algorithm>下面是以前的笔记  (1) int 类型的next_permuta ...

  5. json返回数据库的时间格式为/Date(1477294037000)/，怎样在前台进行格式化转换

    方法一: 原理是取中间的数,再转换成js的Date类型 function ChangeDateFormat(val) { if (val != null) { var date = new Date( ...

  6. BZOJ 3053 The Closest M Points

    [题目分析] 典型的KD-Tree例题,求k维空间中的最近点对,只需要在判断的过程中加上一个优先队列,就可以了. [代码] #include <cstdio> #include <c ...

  7. PHP 下载简历

    下载简历:先生成html模版,然后在下载转化为word格式: 获取数据方法: 先获取数据,然后开启缓存,写入数据,关闭缓存:然后下载成word: /** * 下载简历--简单 * @author La ...

  8. 差分约束系统 POJ 3169 Layout

    题目传送门 题意:有两种关系,n牛按照序号排列,A1到B1的距离不超过C1, A2到B2的距离不小于C2,问1到n的距离最大是多少.如果无限的话是-2, 如果无解是-1 分析:第一种可以写这样的方程: ...

  9. Android自动化测试 - MonkeyRunner(三) 随手练习测试脚本

    #coding=utf-8 import os import time #import MonkeyRunner three module from com.android.monkeyrunner ...

  10. BZOJ3723 : PA2014Final Gra w podwajanie

    暴力搜索出所有可行的形状,可以发现本质不同的形状数只有6000个左右. 对于每个形状,它的大小不超过$8\times 8$,故可以按照右下角为原点重建坐标系,用一个unsigned long long ...