<!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. jQuery——超链接提示

    在熟悉jQuery过程中,练习超链接提示显示,发现书本上有个问题,经过查询资料,修改如下: <!DOCTYPE html> <html> <head> <ti ...

  2. python 安装 pip ，并使用pip 安装 filetype

    闲话少说,直接上操作. python版本为2.7.6 可以直接到官网下载,我也提供一个百度云的下载地址 https://pan.baidu.com/s/1kWPXG8Z 这个是window版本,lin ...

  3. Docker实战部署应用——Redis

    Redis 部署 拉取Redis镜像 docker pull redis 创建Redis容器 docker run -id --name=sun_redis -p 6379:6379 redis 客户 ...

  4. 2018-12-25-win10-uwp-显示SVG

    title author date CreateTime categories win10 uwp 显示SVG lindexi 2018-12-25 10:37:5 +0800 2018-2-13 1 ...

  5. 237-基于Xilinx Kintex-7 XC7K325T 的FMC/千兆以太网/SATA/四路光纤数据转发卡

    基于Xilinx Kintex-7 XC7K325T 的FMC/千兆以太网/SATA/四路光纤数据转发卡 一. 板卡概述  本板卡基于Xilinx公司的FPGAXC7K325T-2FFG900 芯片, ...

  6. Taro -- 微信小程序登录

    Taro微信小程序登录 1.调用Taro.login()获取登录凭证code: 2.调用Taro.request()将code传到服务器: 3.服务器端调用微信登录校验接口(appid+appsecr ...

  7. 一、VS支持Vue语法

    一.VS支持Vue语法

  8. case_when

    select sname,score,case when score>=20 and score<30 then 20when score>=30 and score<40 t ...

  9. Apache HttpClient之fluent API的使用

    该方法为Apache HttpClient 4.5以上的版本支持,在官网有明确的说明. 对比以前的方式,其优点是代码更简洁,同时为线程安全的.仅举一个最简单的post栗子 JAR包信息: <de ...

  10. OC + RAC(七) RACSubject和RACSignal的区别

    -(void)_test8{ /// RACSubject继承自RACSignal 但是RACSubject和RACSignal的区别? //1能接收1,2 //但是2只能接收2 RACSubject ...