<!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. js的事件流理解

    面试问到js的事件流,当时说的不是很清楚,现在觉得有必要把这个弄清楚. 事件捕获和事件冒泡 事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流主要分为两种,即事件捕获和事 ...

  2. 2018-9-21-dot-net-core-使用-usb

    title author date CreateTime categories dot net core 使用 usb lindexi 2018-09-21 19:53:34 +0800 2018-0 ...

  3. gcc的-D,-w,-W,-Wall,-O3这些参数的意义

    一.-D 其意义是添加宏定义,这个很有用. 当你想要通过宏控制你的程序,不必傻乎乎的在程序里定义,然后需要哪个版本,去修改宏. 只需要在执行gcc的时候,指定-D,后面跟宏的名称即可. 示例: gcc ...

  4. Centos 的防火墙（firewalld，iptables）

    Centos系统防火墙介绍 概述: 1.Filewalld(动态防火墙)作为redhat7系统中变更对于netfilter内核模块的管理工具: 2.iptables service 管理防火墙规则的模 ...

  5. html+css+javascript学习记录1

    <p> 最近在学一部分前端,知识点很多,却没怎么系统地应用过,因而理解可能不够深吧.所以我想做点片段似的东西,不懂的再在网上搜一搜,这样可能会更有意思点,所以做了这个记录,希望自己坚持下去 ...

  6. Flask中的中间件

    flask也有和Django类似的中间件,不同的是使用三个装饰器来实现的. .berore_request在请求进入视图之前 @app.before_request def be1 bef be2 b ...

  7. VUE的系统指令

    1. -text原样渲染,渲染文本 2.-html   HTML渲染页面 举例: <!doctype html> <html lang="en"> < ...

  8. man VGCREATE

    VGCREATE(8)                                                        VGCREATE(8) NAME/名称       vgcreat ...

  9. Java缓冲字符读取

    public class BufferedReaderDemo { public static void main(String[] args) throws IOException { // 创建流 ...

  10. Keyguard分析

      从Android 6.0开始,位于frameworks/bases/packages/Keyguard的Keyguard开始被编译为一个jar包,被SystemUI静态导入,相当于SystemUI ...