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.
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.
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.
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.
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
(But I’ll definitely be fixing the black site for nojs, still in the midst of getting this preloader/transition effects js working)
