<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>collapse</title>
<style type="text/css">
body{
color: #fff;
background-color: #fff;
margin: 50px;
font-family: "Helvetica Neue", sans-serif;
}
#collapse{
width: 450px;
}
#collapse article{
width: 450px;
background-color: #9B59B6;
border-bottom: 1px solid rgba(255,255,255,.3);
}
#collapse h1{
background: #8E44AD;
height: 70px;
line-height: 70px;
text-indent: 30px;
margin: 0;/*语义化，但默认许多设置需要重置，岂不是变烦了？？*/
font-size: 24px;
cursor: pointer;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
user-select: none;
position: relative;
}
#collapse h1:hover{
background: #6e208e;
}
#collapse h1::after{
content: '';
width: 0;
height: 0;
border-width: 7px;
border-style: solid;
border-color: #fff transparent transparent transparent;
position: absolute;
right: 20px;
top: 35px;
}
#collapse h1.hide::after{
border-color: transparent #fff transparent transparent;
right: 22px;
top: 30px;
}
#collapse p{
color: rgba(255,255,255,.85);
padding: 30px;
margin: 0;
}
#collapse p.hide{
display: none;
}
</style>
</head>
<body>
<section id="collapse">
<article>
<h1>Duis quistor</h1>
<p>In hendrerit orci est, in lacinia diam suscipit a. Phasellus pulvinar lectus augue, vitae semper tortor ornare sit amet. Aliquam porttitor posuere turpis at volutpat. Aliquam non tellus cursus, interdum tortor non, scelerisque mi. Maecenas id nisi imperdiet, pellentesque dui congue, sollicitudin erat. Quisque finibus, sapien ut dapibus imperdiet, mauris ex feugiat sem, vel tempor ligula tellus quis mi.</p>
</article>
<article>
<h1>Aenean libero</h1>
<p>Ut auctor tincidunt sapien, eget pulvinar est tincidunt eu. Vivamus nisl quam, porta at nisi eget, laoreet tincidunt dui. Cras ac tortor a elit pretium hendrerit in non justo. Nullam vestibulum, lorem in lacinia facilisis, sem mauris tempus nisi, eget dignissim elit dui et quam. Curabitur imperdiet lectus orci, eget mollis velit euismod id.</p>
</article>
<article>
<h1>Vestibulum</h1>
<p>Duis in lobortis odio, nec tincidunt sem. Cras nibh lorem, sodales a mattis eu, dignissim placerat lacus. Nullam neque dui, euismod vitae egestas sed, feugiat quis tellus. Duis aliquet velit eget ligula lobortis, a maximus orci imperdiet. Pellentesque dictum eleifend lobortis. Sed dignissim viverra arcu, id tristique nunc. Integer sit amet dapibus nisl.</p>
</article>
</section>
<script type="text/javascript">
window.onload = function(){
var sec = document.getElementById('collapse');
var h1 = sec.getElementsByTagName('h1');
var p = sec.getElementsByTagName('p');

foldAll();
function foldAll(){
for (var i = 0; i < h1.length; i++) {
h1[i].className = 'hide';
p[i].className = 'hide';
}
}

for (var i = 0; i < h1.length; i++) {
h1[i].addEventListener('click',function(event){
event.preventDefault();
refreshCollapse(this);
},false)
}
function refreshCollapse(obj){
if (obj.className === 'hide') {
foldAll();
obj.className = '';
obj.nextElementSibling.className = '';
} else {
obj.className = 'hide';
obj.nextElementSibling.className = 'hide';
}
}

}
</script>
</body>
</html>

tab区域折叠的更多相关文章

  1. 折叠Collapse插件

    实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...

  2. Bootstrap 折叠（Collapse）插件

    折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...

  3. Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

    Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...

  4. Android典型界面设计(4)——使用ActionBar+Fragment实现tab切换

    一.问题描述 之前我们使用ViewPager+Fragment区域内头部导航,在Android 3.0之后Google增加了新的ActionBar,可方便的实现屏幕Head部区域的 设计如返回键.标题 ...

  5. Listview多tab上滑悬浮

    extends:http://blog.163.com/xueshanhaizi@126/blog/static/37250245201410541721892/ 1:近期要做一个含有两个tab切换页 ...

  6. Bootstrap-Plugin：折叠（Collapse）插件

    ylbtech-Bootstrap-Plugin:折叠(Collapse)插件 1.返回顶部 1. Bootstrap 折叠(Collapse)插件 折叠(Collapse)插件可以很容易地让页面区域 ...

  7. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  8. 自定义SWT控件六之自定义Tab

    6.自定义tab 本章节提供的自定义tab 分为两类 tab上带删除按钮和添加按钮,可删除tab和添加tab tab不可删除和添加 6.1 不可删除tab package com.view.contr ...

  9. vim编辑指令（转)

    跳跃指令 类似于游览器中的<前进><后退>按钮  CTRL-] -> 跟着link/tag转入 (follow link/tag)  CTRL-o -> 回到上一次 ...

随机推荐

  1. 垃圾回收器及tomcat调优

    垃圾回收机制 1.概述:垃圾回收机制,Java中的对象不再有"作用域"的概念,只有对象的引用才有"作用域".垃圾回收可以有效的防止内存泄露,有效的使用空闲的内存 ...

  2. iconv 转换文件的编码格式

    1.命令功能 icnov用于转换文件的编码格式 linux默认中没有icnov文件,需要自己安装http://www.gnu.org/software/libiconv/. (1)下载libiconv ...

  3. 使用GDB调试时attach ID不被允许

    在进入gdb后,直接使用attach ID,出现下面的情况: Could not attach to process.  If your uid matches the uid of the targ ...

  4. 关于Python获取图片文件二进制数据的问题(获取为空)

    在搭建fastdfs文件系统的时候遇到了点问题,在测试上传文件数据流的时候,需要Python来获取本地文件的二进制流 from fdfs_client.client import Fdfs_clien ...

  5. [php 拓展开发] hello world

    1.下载php源码包 2.在php-7.0.9/ext 下执行 ./ext_skel --extname=hello  3. 4.拓展代码 5. 6.编译 多了分号,出错. 重新编译成功,但是生成的文 ...

  6. web源码泄露

    http://www.am0s.com/ctf/175.html vim 文件泄露 1.备份文件 源文件:index.php 备份文件:index.php~ 2.临时文件 源文件:index.php ...

  7. 【串线篇】spring boot外部配置加载顺序

    SpringBoot也可以从以下位置加载配置: 原则仍然是优先级从高到低:高优先级的配置覆盖低优先级的配置,所有的配置会形成互补配置 1.命令行参数 所有的配置都可以在命令行上进行指定 java -j ...

  8. Python---基础---dict和set2

    2019-05-21 写一个程序来管理用户登陆系统的用户信息:登陆名字和密码,登陆用户账号建立后,已存在用户可以用登陆名字和密码重返系统,新用户不能用别人的用户名建立用户账号 ------------ ...

  9. spring security权限架架mvn坐标

    <!-- spring security start --> <dependency> <groupId>org.springframework.security& ...

  10. 怎么测试php代码

    没有任何一名程序员可以一气呵成.完美无缺的在不用调试的情况下完成一个功能或模块.调试实际分很多种情况. 暴力调试 这种方式简单粗暴,一般PHP程序员都会用,那就是浏览器调试,在编辑器内写完代码后随后打 ...