-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·80 lines (69 loc) · 3.71 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
<!DOCTYPE html>
<html class="no-js">
<head>
<!-- Meta stuff -->
<meta charset="utf-8">
<!-- Title -->
<title>Tab experiments</title>
<!-- More meta stuff -->
<meta name="description" content="A simple stydy on tab navigation in the web">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr -->
<script src="js/lib/modernizr-build.js"></script>
</head>
<body class="tab-accordion">
<div class="wrap">
<nav>
<a class="current pr" class="pr" href="index.html">Accordion tabs</a>
<a href="accordion-tabs-vertical.html">Vertical accordion tabs</a>
<a href="http://clubmate.fi/simple-responsive-library-independent-tabbed-navigation">Blog post</a>
<a href="https://github.com/hilja/accordion-tabs">GitHub</a>
</nav>
<h2>
Tabs fold to accordion on small screens
</h2>
<p>
See the CSS for this <a href="https://github.com/hilja/accordion-tabs/blob/master/scss/objects/_accordion-tabs.scss">here</a>. And JavaScript <a href="https://github.com/hilja/accordion-tabs/blob/master/js/src/author.js">here</a>.
</p>
<div class="tab-wrap">
<details class="tab" open>
<summary class="tab__title">
First thing
</summary>
<div class="tab__content">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ex libero, temporibus aperiam velit ea consectetur illum voluptatem cumque esse consequuntur dolorem nostrum, modi laborum, molestiae suscipit. Impedit, neque, voluptates!
</p>
</div>
</details>
<details class="tab">
<summary class="tab__title">
Second thing
</summary>
<div class="tab__content">
<h2>Dolor sit amet</h2>
<p>
Reprehenderit doloremque aliquid eveniet atque in repudiandae ab officiis. Odio omnis eveniet dolores sapiente! Fugiat itaque labore adipisci praesentium reiciendis, non dignissimos tempore modi deleniti nisi ab rem quaerat molestias excepturi voluptatem, dolor a beatae ea vel illo est magnam impedit. Inventore eum beatae eos dignissimos quasi quam distinctio iusto suscipit illum, soluta fuga, recusandae.
</p>
</div>
</details>
<details class="tab">
<summary class="tab__title">
Third thing
</summary>
<div class="tab__content">
<h2>Consectetur adipisicing</h2>
<p>
Minima eaque laudantium. Itaque officiis, quaerat eius provident ad ipsum, laboriosam, sint veniam doloremque ab veritatis? Non nam consequatur quis, atque cupiditate reprehenderit id, commodi earum optio unde qui debitis pariatur voluptas veniam a impedit. Earum numquam adipisci repellendus, reiciendis ipsa dicta tenetur!
</p>
</div>
</details>
</div><!-- /.tab-wrap -->
</div><!-- /.wrap -->
<!-- Scripts -->
<script src="js/src/author.js"></script>
</body>
</html>