<!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. CentOS7安装MongoDB及基础操作

    安装环境说明 系统环境说明 [root@master ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) [root@ma ...

  2. ASPOSE的示例下载地址

    ftp://112.124.7.170/ASPOSE/Aspose.Words_16.3.0.zip http://blog.163.com/haolongqin@126/blog/static/10 ...

  3. alert(1) to win 16

  4. 去掉Tomcat网站地址栏的小猫图标

    当我们打开CSDN等网站时,在地址栏前面就会出现红色的C状图标,如果在桌面新建此链接的快捷方式,则桌面图标也自动变为该地址栏ICO图标.在基于TOMCAT的BS应用或网站开发时,默认的图标为黄色的小猫 ...

  5. 前端小姐姐学PHP之（一）

    作为一个前端不懂后台那是不对的,嘻嘻,来走一波... 一.安装 **我这里用的是phpStudy和phpStrom** 1.安装phpStudy 链接:https://pan.baidu.com/s/ ...

  6. Java 根据银行卡号获取银行名称以及图标

    转 https://blog.csdn.net/N_007/article/details/78835526 参考 CNBankCard 中国各大银行卡号查询 一.支付宝接口获取名称 根据 卡号 获取 ...

  7. 笔记-CSS-e:nth-chid

    1,CSS 2,

  8. python之requests模块中的params和data的区别

    params的时候之间接把参数加到url后面,只在get请求时使用: import requests url='https://api.ireaderm.net/account/charge/info ...

  9. jquery easyui控件事件监听委托给jquery事件监听，keyup取最新值问题

    <div id="<?php echo NS; ?>toolbar"> <div style="padding:5px"> ...

  10. 为 PhpStorm 配置 Xdebug 来调试代码

    当项目越来越复杂,排错就越发困难. 你以为代码是这么运行的,但就是有未想到的功能导致流程变得不可捉摸. 此时我们需要调试啊调试... PhpStorm 是一款优秀的 PHP IDE,排除其 Java ...