docs/foo.html

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>table, th, td { border-collapse: collapse; }table.framed { border: 2px solid black; }table.framed th, table.framed td { border: 1px solid black; }th, td { padding: 3px; }tr:nth-child(even) { background-color: #eee; }tr:nth-child(odd) { background-color: #fff; }</style>
</head><body>
<div><table class="framed"><tr><td><p>(0,0)</p></td><td><p>(0,1)</p></td><td><p>(0,2)</p></td><td><p>(0,3)</p></td><td><p>(0,4)</p></td></tr><tr><td><p>(1,0)</p></td><td><p>(1,1)</p></td><td><p>(1,2)</p></td><td><p>(1,3)</p></td><td><p>(1,4)</p></td></tr><tr><td><p>(2,0)</p></td><td><p>(2,1)</p></td><td><p>(2,2)</p></td><td><p>(2,3)</p></td><td><p>(2,4)</p></td></tr><tr><td><p>(3,0)</p></td><td><p>(3,1)</p></td><td><p>(3,2)</p></td><td><p>(3,3)</p></td><td><p>(3,4)</p></td></tr><tr><td><p>(4,0)</p></td><td><p>(4,1)</p></td><td><p>(4,2)</p></td><td><p>(4,3)</p></td><td><p>(4,4)</p></td></tr></table></div><script> [...document.querySelectorAll('p')].forEach(el => el.addEventListener('click', () => el.nextSibling.style.display = el.nextSibling.style.display === 'none' ? 'block' : 'none')); [...document.querySelectorAll('ul ul')].forEach(el => el.style.display = 'none'); </script></body>