Nice. But if you can afford to reserve space for the table, why would you still want to open and close it?
I never thought about that, because I just went with what you had instead of trying to redo everything.
You might as well display the table permanently.
You could certainly choose to do that. Instead of giving the container div an id for making it easier to apply CSS to it, you could just give it the style of "display: flex; flex-flow: row wrap".
Or start with an open table. That the standard version of the ID adds a hidden table was sort of an emergency measure for still being able to access the table if the author did not find a place to fit it on his page.
While the page will not always be wide enough to display the board and piece table side-by-side, it should still be able to display everything in a single column. So, I don't think anyone would be having trouble fitting it on the page. It's more a matter of what you want to keep close together.
The way it currently works, it first displays nothing, then the piece table by itself, then a legend for symbols that appear on the board by itself, then both of these together, then neither again. If you want to keep the piece table displayed, I would recommend moving the symbol legend to the first div underneath the board, and displaying it only when someone clicks on a piece on the board or a piece name on the table.
If this only needs some change in the way it creates the anchors, you could make that change optional, under control of a parameter sideBySide=1.
It may make sense to just make the side-by-side view the default display. It will display side-by-side only when there is enough horizontal space, and it will display vertically when there isn't.
I never thought about that, because I just went with what you had instead of trying to redo everything.
You could certainly choose to do that. Instead of giving the container div an id for making it easier to apply CSS to it, you could just give it the style of "display: flex; flex-flow: row wrap".
While the page will not always be wide enough to display the board and piece table side-by-side, it should still be able to display everything in a single column. So, I don't think anyone would be having trouble fitting it on the page. It's more a matter of what you want to keep close together.
The way it currently works, it first displays nothing, then the piece table by itself, then a legend for symbols that appear on the board by itself, then both of these together, then neither again. If you want to keep the piece table displayed, I would recommend moving the symbol legend to the first div underneath the board, and displaying it only when someone clicks on a piece on the board or a piece name on the table.
It may make sense to just make the side-by-side view the default display. It will display side-by-side only when there is enough horizontal space, and it will display vertically when there isn't.