How to load html page incompletely?

Question

JavaScript

There is an html page with 5 tables for example.
How can I make it so that when this page is loaded, the first table is displayed first, then by the button (of course, without reloading the page) or by clicking on any line of this table, the second table is displayed in place of the first table, then the third in its place and so on. In short, so that one table disappears, and the next one appears in its place.
You need to do this without using ajax and php. This whole thing should happen on the client side, i.e. I guess using js + jquery

Answer 1

Change the CSS property displayof the container with the desired table by clicking on default, set the rest tonone .

Answer 2

Start by reading the definition of AJAX in the wiki, then answer the question for yourself: "Do I need to load additional data from the server, or do I need to display the already loaded data in parts?" If loading, then you need exactly AJAX, if only displaying, then xmoonlight has already answered above.