Load snippet on click


#1

Hi –

I’m using Kirby to put together a portfolio/blog, & every page has a header section that includes two links that open a slidedown About section (called with <?php snippet('about') ?>) & an Archive section ( <?php snippet('archive') ?>).

Is there a way to only load each of these snippets into the DOM only after the link is clicked?

It’s not a huge deal since both sections are just text, but they do add 400~ lines of code to every page, & realistically these sections are only actually being expanded a fraction of the time.

Current version is staged here: http://chrs.cblls.com/staging


#2

You would probably have to ajax the content in from another page or from json. theres a guide here.

I would point out though that google gives very little weight to hidden content, and things like archives are useful for SEO (Google likes things with recent date meta data). If search engines are important to you, I would consider not hiding the content at all.


#3

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.


#4

Great, thank you both! I’ll look into the json doc & ajax recipe.

Admittedly, both SEO & nojs visitors aren’t too large of a concern for my uses :wink:
(But I’ll definitely be fixing the black site for nojs, still in the midst of getting this preloader/transition effects js working)