先看效果:

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. 成为IBM精英讲师-一分耕耘 一份收获 同时也多了一份责任!

    成为IBM精英讲师 一分耕耘 一份收获 同时也多了一份责任! http://www.webspherechina.net/?action-iste-type-lecturerlist 650) thi ...

  2. this compilation unit is not on the build of a java project

    this compilation unit is not on the build of a java project java里输入代码就出这个提示,无法写代码了. 找到觉得路径打开文件编辑就好了, ...

  3. C++ 16进制转10进制

    #include <stdio.h>#include <string.h>unsigned long f(char* str){ unsigned long var=0; un ...

  4. C++的双冒号(域解析符)

    在C++中,“::”表示“作用域标识符”或者叫“作用域分解运算符”,比如:“类名::函数名”,这样是表示该函数是该类的成员函数, 但是象下面这种写法:“::函数名”,作用域标识符前面没有任何对象,代表 ...

  5. 1) data-options

    <select class="easyui-combobox" data-options="editable:false"> <select ...

  6. commondline 之三 执行jar文件

    java [-options] -jar jarfile [args...] 点击查看获取可执行jar文件方法

  7. 求C#开发大神指点职业规划或者开发路数(以后怎么走),谢谢

    背景:作为一名Asp.net Web类的开发人员,工作时间有点长,5年不到,属于是天赋不太强,但是比较努力型的人,开发过程中那事情基本上都会,各种前后端框架也会使用.目前在研究分布式缓存应用 Memc ...

  8. How Tomcat Works(九)

    本文接下来描述servlet容器是怎样管理其相关组件的生命周期的,首先本人描述一下事件监听模式,也可以称为观察者模式,该模式分为以下角色 即抽象主题角色 具体主题角色 抽象观察者角色及具体观察者角色, ...

  9. C# 运用params修饰符来实现变长参数传递

    一般来说,参数个数都是固定的,定义为集群类型的参数可以实现可变数目参数的目的,但是.NET提供了更灵活的机制来实现可变数目参数,这就是使用params修饰符.可变数目参数的好处就是在某些情况下可以方便 ...

  10. 利用Notepad++插件(JSToolNpp):让JS代码格式化对齐

    http://www.ycyjkj.com/post-663.html 程序员或者正在学习的同学一般都会遇到一个问题,看别人的源码,只是一行,没有分开,让人看的很别扭,也可能是作者故意这样做的,也可以 ...