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. MapReduce中的分区方法Partitioner

    在进行MapReduce计算时,有时候需要把最终的输出数据分到不同的文件中,比如按照省份划分的话,需要把同一省份的数据放到一个文件中:按照性别划分的话,需要把同一性别的数据放到一个文件中.我们知道最终 ...

  2. 【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域

    使用POI对xlsx中插入超链接和 插入图片 package com.it.poiTest; import java.awt.image.BufferedImage; import java.io.B ...

  3. error: bad symbolic reference. A signature in HiveContext.class refers to term hive

    在spark-shell中执行val sqlContext = new org.apache.spark.sql.hive.HiveContext(sc)报错: error: bad symbolic ...

  4. Android Studio导出Jar包并混淆

    在Android Studio中,自带反编译查看class文件,如果没有混淆的话,class文件跟java文件基本没有区别了,为了保护,还是混淆的好. 网上看了不少资料,都是直接下载proguard额 ...

  5. DSP using MATLAB示例Example3.6

    代码: n = [-5:5]; x = (-0.9).^n; % x(n) = k = -200:200; w = (pi/100)*k; % [0,pi] axis divided into 101 ...

  6. 提取Windows用户密钥文件cachedump

    提取Windows用户密钥文件cachedump   Windows系统将用户信息和密钥存储在系统存档文件(System hive)和安全存档(Security hive)中.只要提取这些内容,就可以 ...

  7. Js判断客户端是iphone还是安卓

    <script> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexO ...

  8. MapReduce应用案例--单表关联

    1. 实例描述 单表关联这个实例要求从给出的数据中寻找出所关心的数据,它是对原始数据所包含信息的挖掘. 实例中给出child-parent 表, 求出grandchild-grandparent表. ...

  9. iOS 注意事项

    1.记得在项目中设置项目文件命名的prefix,避免命名冲突. 2.在适当的位置对属性和方法进行注释,建议利用插件(如VVDocument)提供效率.在给企业看文档时,可以利用(如Doxygen)这种 ...

  10. BZOJ4118 : [Wf2015]Window Manager

    OPEN.CLOSE.RESIZE操作直接模拟即可. 对于MOVE,设$f_i$表示$i$号矩形的坐标,先无视边界通过DP求出每个矩形的坐标,再根据边界反向用第二次DP求出被移动矩形移动的真实距离,再 ...