-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (108 loc) · 4.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
<style>
nav[aria-label=breadcrumb] ul {
width: 100%;
}
nav[aria-label=breadcrumb] ul li {
display:flex;justify-content: center;align-items: center;
}
nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
content: "";
}
[role=tab] {
border-bottom: 2px solid transparent;
padding: var(--nav-link-spacing-vertical) calc(var(--nav-link-spacing-horizontal)*1.5);
user-select: none;
color: var(--secondary);
border-radius: 0;
background: transparent;
transition: all .25s;
}
[role=tab][aria-current]{
color: var(--contrast)!important;
border-color: var(--contrast);
}
section {
margin: calc(var(--block-spacing-vertical)*.5) 0;
}
section [role=tabpanel] {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-name: slideIn;
}
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform:translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(1rem);
opacity: 0;
}
}
</style>
</head>
<body>
<header class="container">
<nav aria-label="breadcrumb">
<ul>
<li><a href="#" role="tab">Content</a></li>
<li><a href="#" role="tab">Description</a></li>
<li><a href="#" role="tab">Images</a></li>
<li><a href="#" role="tab">Info</a></li>
</ul>
</nav>
</header>
<main class="container">
<section>
<div role="tabpanel">
<h3>Content</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam iure hic omnis, consequuntur dolores et laudantium! Veniam magni beatae dolore ipsum repudiandae itaque recusandae id eaque iusto asperiores? Quas, culpa? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere quia nisi voluptate tempora itaque nostrum, consequatur tempore ab nobis enim eos eaque modi quaerat, ad provident, reiciendis sapiente rerum nihil!</p>
</div>
<div role="tabpanel" hidden>
<h3>Description</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ex cumque corrupti modi culpa sapiente in, ullam, odio vero hic libero animi! Expedita quo natus commodi laboriosam libero eos magni. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere quia nisi voluptate tempora itaque nostrum, consequatur tempore ab nobis enim eos eaque modi quaerat, ad provident, reiciendis sapiente rerum nihil!</p>
</div>
<div role="tabpanel" hidden>
<h3>Images</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem ex quia debitis fugiat quas placeat, nisi ad omnis exercitationem quam, ut, quod sint dolore. Quisquam quos odio quaerat ipsa incidunt? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere quia nisi voluptate tempora itaque nostrum, consequatur tempore ab nobis enim eos eaque modi quaerat, ad provident, reiciendis sapiente rerum nihil!</p>
</div>
<div role="tabpanel" hidden>
<h3>Info</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum veniam ullam illum qui, quisquam ex provident magni sunt repellendus consectetur iste dicta nam alias, ea culpa reprehenderit at animi aliquid. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere quia nisi voluptate tempora itaque nostrum, consequatur tempore ab nobis enim eos eaque modi quaerat, ad provident, reiciendis sapiente rerum nihil!</p>
</div>
</section>
</main>
<script>
const _ = el => [...document.querySelectorAll(el)];
_('[role=tab]')[0].setAttribute('aria-current', true);
_('[role=tab]').forEach(tab=> {
tab.addEventListener('click', (e) => {
e.preventDefault();
!e.target.hasAttribute('aria-current') ?
e.target.setAttribute('aria-current', true) :
null;
_('[role=tab]').forEach(t=> {
t.hasAttribute('aria-current') && t != e.target ?
t.removeAttribute('aria-current') :
null;
});
_('[role=tabpanel]').forEach(tp=> {
_('[role=tabpanel]').indexOf(tp) == _('[role=tab]').indexOf(e.target) ?
tp.removeAttribute('hidden') :
tp.setAttribute('hidden', true);
});
});
});
</script>
</body>
</html>