Layout changing on hover is annoying. Prefer click event to toggle
visibility, with links and CSS3 selector for scriptless fallback.
#browser .aside p {
margin: 1ex 0;
}
-#browser tr:hover .aside {
+#browser tr.target .aside,
+#browser tr:target .aside {
height: auto;
- min-height: 5ex; /* browsers currently only transition to static values */
}
#browser td.X {
white-space: nowrap; /* some browsers break on dashes */
my $cell = $_ ? lc $_->[0] : '-';
print '<th>', $cell;
}
- print '<td>', $row->{title};
+ print '<td>', map {
+ sprintf('<a href="%s" onclick="%s">%s</a>',
+ "#$id",
+ sprintf("try { %s; return false } catch(err) { return true }",
+ "document.getElementById('$id').classList.toggle('target')",
+ ),
+ $_,
+ );
+ } $row->{title};
print '<div class=aside>';
s/\.?$/./, print "<p>$_</p>" for map { ref $_ ? @$_ : $_ || () }
$row->{description}, $row->{notes};