How to hide news on a page except for one?

Question

css

Good day.
There is a page on which the news is located, each news goes one after another in div blocks, tell me how you can implement it so that when you click on the news or the button next to it, this news opens on the same page and hides other news, and then button back everything returned.
Maybe add an ID to each block and when you click "read more" you can hide all the news on the page, and then vice versa open them? Or all the news in one block with an ID and somehow pull it out already ..
Or how else can I do it?

Answer 1

Cheap and cheerful, use a JS framework with routes (Vue\React...). It is possible without routes, on the component, it is not so important here.
For a long time and most likely there will be no point - in JS without a framework: get event.target and remove all non-matching elements. And to give this a class that will reveal hidden information, or add it to JS from somewhere (an object in memory or by get-request in the API)