forked from anvk/a11yAccordion
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
116 lines (101 loc) · 3.64 KB
/
example.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
<html>
<head>
<meta charset="utf-8">
<title>a11y Accordeon</title>
<link rel="stylesheet" href="dist/css/a11yAccordeon.min.css" />
</head>
<body onload="load()">
<script type="text/javascript">
var load = function () {
var accordeon = a11yAccordeon({
parentSelector: '#accordeon1',
hiddenLinkDescription: 'this is some row with data',
showSearch: true
});
accordeon.uncollapseRow(2);
var anotherAccordeon = a11yAccordeon({
parentSelector: '#accordeon2',
hiddenLinkDescription: 'this is some row with data',
showSearch: true,
colorScheme: 'dark',
showOne: false
});
};
</script>
<h1 align="center">a11yAccordeon widget</h1>
<h2 align="center">Building Web with accessibility in mind.</h2>
<hr />
<h3 align="center">Default accordeon</h3>
<ul class="a11yAccordeon" id="accordeon1">
<li class="a11yAccordeonItem">
<div class="a11yAccordeonItemHeader">
<strong>Some Header #1</strong>
</div>
<div class="a11yAccordeonHideArea">
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Point 4</li>
</ul>
</div>
</li>
<li class="a11yAccordeonItem">
<div class="a11yAccordeonItemHeader">
<strong>Header with a Link within</strong>
</div>
<div class="a11yAccordeonHideArea">
<h2>My other content</h2>
<p>This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
<a href="#">This link is also accessible only when the collapsible area is visible.</a>
</div>
</li>
<li class="a11yAccordeonItem">
<div class="a11yAccordeonItemHeader">
<strong>Final Header with Controls#3</strong>
</div>
<div class="a11yAccordeonHideArea">
<p>These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
<input type='test' placeholder='Please enter some info here' style='width: 20%' /><br /><br />
<input type='test' placeholder='Another control' />
</div>
</li>
</ul>
<h3 align="center">Accordeon which can show multiple items</h3>
<ul class="a11yAccordeon" id="accordeon2">
<li class="a11yAccordeonItem">
<div class="a11yAccordeonItemHeader">
<strong>Random Months</strong>
</div>
<div class="a11yAccordeonHideArea">
<ul>
<li>January</li>
<li>June</li>
<li>February</li>
<li>November</li>
</ul>
</div>
</li>
<li class="a11yAccordeonItem">
<div class="a11yAccordeonItemHeader">
<strong>Dummy Text</strong>
</div>
<div class="a11yAccordeonHideArea">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="a11yAccordeonItem">
<div class="a11yAccordeonItemHeader">
<strong>Header with image</strong>
</div>
<div class="a11yAccordeonHideArea">
<img src="assets/imgs/image.jpg" alt="example image for the presentation purposes">
</div>
</li>
</ul>
</body>
</html>
<script type="text/javascript" src="js/libs/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="dist/js/a11yAccordeon-0.2.2.min.js"></script>
<!-- for debugging purposes -->
<!-- <script type="text/javascript" src="js/a11yAccordeon.js"></script> -->