-
Notifications
You must be signed in to change notification settings - Fork 0
/
accordion-tabs-vertical.html
executable file
·96 lines (86 loc) · 6.87 KB
/
accordion-tabs-vertical.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
<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="root-vertical-tabs">
<div class="wrap">
<nav>
<a class="pr" href="index.html">Accordion tabs</a>
<a class="current" 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>
Vertical 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-vertical.scss">here</a>. And JavaScript <a href="https://github.com/hilja/accordion-tabs/blob/master/js/src/author.js">here</a>. The tabs "sidebar" scales to the height of the content.
</p>
<div class="tab-wrap clearfix">
<details class="tab-vertical" open>
<summary class="tab-vertical__title">
First thing
</summary>
<div class="tab-vertical__content">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores itaque laborum iste modi tempore blanditiis voluptatum dolore qui omnis nulla obcaecati repellendus doloribus.
</p>
<p>
Explicabo incidunt, aliquid, dignissimos consectetur quia ratione, officiis cumque excepturi aspernatur error ex qui ullam dicta quidem maiores minus? Repudiandae aut corporis iste quia, ea voluptatem eos! Minima numquam magnam, nesciunt similique voluptas veniam odit eveniet tempora. Eos ipsum quasi velit. Totam numquam similique temporibus saepe autem sapiente, eaque alias fuga quasi consequuntur.
</p>
</div>
</details>
<details class="tab-vertical">
<summary class="tab-vertical__title">
Second thing
</summary>
<div class="tab-vertical__content">
<h2>Dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores itaque laborum iste modi tempore blanditiis voluptatum dolore qui omnis nulla obcaecati repellendus doloribus, in, labore quidem consequuntur laboriosam id aperiam minima dolor ad incidunt consectetur.
</p>
<p>
Explicabo incidunt, aliquid, dignissimos consectetur quia ratione, officiis cumque excepturi aspernatur error ex qui ullam dicta quidem maiores minus? Repudiandae aut corporis iste quia, ea voluptatem eos! Minima numquam magnam, nesciunt similique voluptas veniam odit eveniet tempora. Eos ipsum quasi velit. Totam numquam similique temporibus saepe autem sapiente, eaque alias fuga quasi consequuntur.
</p>
</div>
</details>
<details class="tab-vertical">
<summary class="tab-vertical__title">
Third thing
</summary>
<div class="tab-vertical__content">
<h2>Consectetur adipisicing</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores itaque laborum iste modi tempore blanditiis voluptatum dolore qui omnis nulla obcaecati repellendus doloribus, in, labore quidem consequuntur laboriosam id aperiam minima dolor ad incidunt consectetur.
</p>
<p>
Explicabo incidunt, aliquid, dignissimos consectetur quia ratione, officiis cumque excepturi aspernatur error ex qui ullam dicta quidem maiores minus?
</p>
<p>
Repudiandae aut corporis iste quia, ea voluptatem eos! Minima numquam magnam, nesciunt similique voluptas veniam odit eveniet tempora. Eos ipsum quasi velit. Totam numquam similique temporibus saepe autem sapiente, eaque alias fuga quasi consequuntur.
</p>
<p>
Fugit rerum animi optio, similique unde amet officia labore ullam laboriosam, illo provident minima ab! Laboriosam iure aliquid natus molestias dolorum nesciunt officiis officia, quasi qui nulla quaerat dicta nam, quia, reiciendis quo nisi architecto provident quos culpa iste vitae nihil saepe a. Nesciunt, atque, et? Eos voluptatum optio, molestiae vitae est voluptate deserunt, commodi, accusamus quaerat dolorum voluptas animi quidem non reprehenderit quibusdam deleniti a esse, assumenda impedit aspernatur enim at facilis doloribus! Rerum et quisquam illum numquam, aspernatur autem esse eum quia in adipisci. Excepturi ipsum voluptatum maiores molestiae dolore quam aliquam dignissimos unde, incidunt perspiciatis nostrum eum quia officiis temporibus! Ipsam placeat commodi esse facilis iure quas hic minima!
</p>
<p>
Fugit rerum animi optio, similique unde amet officia labore ullam laboriosam, illo provident minima ab! Laboriosam iure aliquid natus molestias dolorum nesciunt officiis officia, quasi qui nulla quaerat dicta nam, quia, reiciendis quo nisi architecto provident quos culpa iste vitae nihil saepe a. Nesciunt, atque, et? Eos voluptatum optio, molestiae vitae est voluptate deserunt, commodi, accusamus quaerat dolorum voluptas animi quidem non reprehenderit quibusdam deleniti a esse, assumenda impedit aspernatur enim at facilis doloribus! Rerum et quisquam illum numquam, aspernatur autem esse eum quia in adipisci. Excepturi ipsum voluptatum maiores molestiae dolore quam aliquam dignissimos unde, incidunt perspiciatis nostrum eum quia officiis temporibus! Ipsam placeat commodi esse facilis iure quas hic minima!
</p>
</div>
</details>
</div><!-- /.tab-wrap -->
</div><!-- /.wrap -->
<!-- Scripts -->
<script src="js/src/author.js"></script>
</body>
</html>