robmc.github.io/accessible_table_with_expandable_rows.html at master · robmc/robmc.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Table With Expandable Rows</title>
		<link rel="stylesheet" type="text/css" href="stylesheet.css">
    <style type="text/css">
      .offscreen {
        position: absolute;
        left: -1000px;
        top: 0px;
        overflow:hidden;
        width:0;
      }

      .parentRow {
        text-align: center;
      }

      .subRow {
        background-color: #CFCFCF;
      }
    </style>
		<script>
      function toggleRow(e) {
        var subRow = e.parentNode.parentNode.nextElementSibling;
        subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none';

        var img = e.getElementsByTagName('img')[0];
        var value = e.getAttribute("aria-expanded");

        if (value == "false") {
          e.setAttribute("aria-expanded", "true");
          img.setAttribute("src", "/images/expandable_table/collapse.PNG");
          img.setAttribute("alt", "Collapse child row");
        } else {
          e.setAttribute("aria-expanded", "false");
          img.setAttribute("src", "/images/expandable_table/expand.PNG");
          img.setAttribute("alt", "Expand child row with more information");
        }
      }
    </script>
	</head>
	<body>
		<table style="width:50%">
			<caption>Test Table</caption>
			<thead>
				<tr>
					<th><span class="offscreen">State Icon</span></th>
					<th>Column 2</th>
					<th>Column 3</th>
					<th>Column 4</th>
					<th>Column 5</th>
				</tr>
			</thead>
			<tbody>
				<tr class="parentRow">
					<td><a href="#" onclick="toggleRow(this);" aria-expanded="false"><img alt="Expand child row with more information" height="20" src="/images/expandable_table/expand.PNG"></a></td>
					<td>test cell</td>
					<td>test cell</td>
					<td>test cell</td>
					<td>test cell</td>
				</tr>
				<tr style="display: none;" class="subRow">
					<td colspan="5"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra tempor tincidunt. Proin sollicitudin molestie erat id faucibus. Nam sit amet maximus metus. Mauris vel tristique ex, non elementum libero. Pellentesque at nulla tortor. Suspendisse vulputate accumsan augue. Vestibulum a aliquam sapien. Vivamus vel turpis erat. Nunc tempus nisi nulla, sit amet eleifend purus maximus ut. Suspendisse sed tristique risus, sit amet feugiat diam. </p></td>
				</tr>
				<tr class="parentRow">
					<td><a href="#" onclick="toggleRow(this)" aria-expanded="false"><img alt="Expand child row with more information" height="20" src="/images/expandable_table/expand.PNG"></a></td>
					<td>test cell</td>
					<td>test cell</td>
					<td>test cell</td>
					<td>test cell</td>
				</tr>
				<tr style="display: none;" class="subRow">
					<td colspan="5"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra tempor tincidunt. Proin sollicitudin molestie erat id faucibus. Nam sit amet maximus metus. Mauris vel tristique ex, non elementum libero. Pellentesque at nulla tortor. Suspendisse vulputate accumsan augue. Vestibulum a aliquam sapien. Vivamus vel turpis erat. Nunc tempus nisi nulla, sit amet eleifend purus maximus ut. Suspendisse sed tristique risus, sit amet feugiat diam. </p></td>
				</tr>
				<tr class="parentRow">
					<td><a href="#" onclick="toggleRow(this)" aria-expanded="false"><img alt="Expand child row with more information" height="20" src="/images/expandable_table/expand.PNG"></a></td>
					<td>test cell</td>
					<td>test cell</td>
					<td>test cell</td>
					<td>test cell</td>
				</tr>
				<tr style="display: none;" class="subRow">
					<td colspan="5"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra tempor tincidunt. Proin sollicitudin molestie erat id faucibus. Nam sit amet maximus metus. Mauris vel tristique ex, non elementum libero. Pellentesque at nulla tortor. Suspendisse vulputate accumsan augue. Vestibulum a aliquam sapien. Vivamus vel turpis erat. Nunc tempus nisi nulla, sit amet eleifend purus maximus ut. Suspendisse sed tristique risus, sit amet feugiat diam. </p></td>
				</tr>
				<tr class="parentRow">
					<td><a href="#" onclick="toggleRow(this)" aria-expanded="false"><img alt="Expand child row with more information" height="20" src="/images/expandable_table/expand.PNG"></a></td>
					<td>test cell</td>
					<td>test cell</td>
					<td>test cell</td>
					<td>test cell</td>
				</tr>
				<tr style="display: none;" class="subRow">
					<td colspan="5"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra tempor tincidunt. Proin sollicitudin molestie erat id faucibus. Nam sit amet maximus metus. Mauris vel tristique ex, non elementum libero. Pellentesque at nulla tortor. Suspendisse vulputate accumsan augue. Vestibulum a aliquam sapien. Vivamus vel turpis erat. Nunc tempus nisi nulla, sit amet eleifend purus maximus ut. Suspendisse sed tristique risus, sit amet feugiat diam. </p></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>