Yes, Ajax would be the way to achieve this.
Both methods (Ajax and hiding stuff) do have one disadvantage: The content is not accessible to people who have disabled JavaScript for some reason or another, in fact, if I turn off JS, in your example all I get is a page with a black background. So I’d recommend to make this content still accessible with JS turned of and use JS for progressive enhancement.
As regards search engine crawling of dynamic content, I think modern crawlers are able to detect this content: https://webmasters.googleblog.com/2017/12/rendering-ajax-crawling-pages.html
The JSON API article referenced above is a bit outdated. These days, you could build a JSON API with a route instead of creating a page. However, this is not necessary to load a snippet, but I would use a JSON content representation.
This cookbook recipe might also be of interest: https://getkirby.com/docs/cookbook/ajax-load-more, even though it deals with loading more articles, but the principle is the same.