I want a basic description of how to use CSS to expand/colapse a table row.
If I can seperate out the code from the table & into the header that would mean that I can reuse the code for multiple tables - this would be good.
For example, I want a visitor to be able to click on the 1st table row ("My Title") and have it hide (moving any content below it up) the 2nd table row. I would like to be able to click anywhere in the table row, not just on the text, unless this will overly complicate the code:
So as far as the user is concerned, after they click on the 1st table row the 1st time it will hide the 2nd row, when they click on the 1st table row again it will show the 2nd table row. I'd like to have the full table showing to start with when the page loads.
[Optional] Is it much harder if there are 3 or more rows all up & clicking on the 1st row will hide the 2nd 2 or more rows? [Optional - this is not required to answer the question]