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. SQLserver删除某数据库中所有表 方法 二

    方便删除数据库中所有的数据表,清空数据库,有些有约束,不能直接delete,需要先删除库中的约束,代码如下: --删除所有约束DECLARE c1 cursor for select 'alter t ...

  2. loadrunner生成随机数

    loadrunner生成随机数一: 对网站注册进行压力测试时,需要对注册的用户名进行参数化,因为可以会用到大量的测试数据,所以选择通过生成随机数来进行参数化.最开始用loadrunner自带的参数随机 ...

  3. Linux定时，计划任务cron

    假如你有一些任务要定期执行,比如清理磁盘.删除过期文件.发送邮件和提醒,这个时候可以用cron来实现. crond是后台进程,而crontab则是定制好的计划任务表. 启动与停止 查看状态/sbin/ ...

  4. js String对象

    字符串(String) 字符串(String)使用长度属性length来计算字符串的长度: 在字符串中查找字符串 字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置: 实例 ...

  5. 去除android手机滚动条

    方法1:::-webkit-scrollbar{display: none;} 方法2:::-webkit-scrollbar{height:0; width:0:}

  6. SQL初级第二课

    随着我们数据库越来越复杂 我们要掌握的姿势也要也来越多.... 首先建立个表 create table shop(code int primary key identity (1,1),name va ...

  7. Python Web 开发的十个框架【转载】

    Python 是一门动态.面向对象语言.其最初就是作为一门面向对象语言设计的,并且在后期又加入了一些更高级的特性.除了语言本身的设计目的之外,Python标准 库也是值得大家称赞的,Python甚至还 ...

  8. Swift3.0语言教程获取字符串编码与哈希地址

    Swift3.0语言教程获取字符串编码与哈希地址 Swift3.0语言教程获取字符串编码与哈希地址,以下将讲解字符串中其它内容的获取方法. 1.获取字符串编码 在NSString中可以使用2个属性获取 ...

  9. Inversion Sequence(csu 1555)

    Description For sequence i1, i2, i3, … , iN, we set aj to be the number of members in the sequence w ...

  10. const int *

    5.Please choose the right statement about constusage: A.const int a;//const interger B.int const a;/ ...