先看效果:

Code:

     <div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>

BootStrap2学习日记22---点击展开的更多相关文章

  1. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...

  2. BootStrap2学习日记2--将固定布局换成响应式布局

    概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...

  3. BootStrap2学习日记23---图片轮播

    <div id="carousel1" class="carousel slide"> <div class="carousel-i ...

  4. BootStrap2学习日记21---消息提示

    <p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...

  5. BootStrap2学习日记20---定制缩略图

    先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...

  6. BootStrap2学习日记19---缩略图

    缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...

  7. BootStrap2学习日记18---提示消息

    代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...

  8. BootStrap2学习日记17---导航路径和分页

    导航路径 代码: <ul class="breadcrumb"> <li><a href="#">Home</a> ...

  9. BootStrap2学习日记16---选项卡内容

    代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...

随机推荐

  1. delphi请求idhttp数据

    idhttp ss : TStringStream; begin ss := TStringStream.)); { 指定gb2312的中文代码页,或者54936(gb18030)更好些 utf8 对 ...

  2. 关于诺顿身份安全2013独立版(Norton Identity Safe)

    现在身份安全这货好像从诺顿的套装当中独立出来了,出了中文版.其实诺顿的Web信誉做得还是不错的,当然天朝不要有太大期望.只是公认的做web信誉做得最好的应该就是趋势科技和诺顿,所以诺顿的身份安全也许还 ...

  3. HDU3874Necklace(树状数组+离线操作)

    此题的大意思说有一串珠子,每个珠子都有自己的欣赏值value,现在给你一串珠子每个的欣赏值,并给出一些询问,查询某个区间内部总欣赏值是多少,但是有一个约定就是如果这个区间内部有两个珠子的欣赏值是一样的 ...

  4. C# 消息处理机制及自定义过滤方式

    一.消息概述 Windows 下应用程序的执行是通过消息驱动的.消息是整个应用程序的工作引擎,我们需要理解掌握我们使用的编程语言是如何封装消息的原理. 1. 什么是消息(Message) 消息就是通知 ...

  5. 关于表格中td自动换行做法

    两个条件 一是给table中第一个tr(也就是表头)下的td或者th宽度,代码如下 而是让文字碰到边界自动换行 css属性 style="word-wrap:break-word;word- ...

  6. 用SSH连接SSH连接nitrous.io

    CSDN怎么传不上图片... http://user.qzone.qq.com/1756942789/blog/1388662053 1:先下载Bitvise SSH 2:打开 keypair man ...

  7. Linux编译安装RTL8192CU芯片驱动,使用TP_LINK wn823n无线网卡

    前几天给自己的台式电脑安装了Window 7+CentOS 6.4 Linux双系统,发现在Windows 7下面可以正常使用TP_LINK wn823n无线网卡来连接无线网络,但是在Linux下面, ...

  8. hdu 3397 Sequence operation(很有意思的线段树题)

    Sequence operation Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  9. sql waitfor 延时执行

    看MSDN:http://msdn.microsoft.com/zh-cn/library/ms187331.aspx 语法为: WAITFOR { DELAY 'time_to_pass' | TI ...

  10. contentWindow 和contentDocument区别 及iframe访问

    a>contentWindow 兼容各个浏览器,可取得子窗口的 window 对象. b>contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 ...