Hi jekyllers,
I’m enjoying how @jhvanderschee approaches ‘Accordions’…
example 
so that you end up … just, on a FAQ s list, in the front matter page showing them :
—
accordion:
- title: this is item FAQ1
content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- title: this is item FAQ2
content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
see here, at Jekyllcodex for the full explanation
So elegant, great.
As long as i have pretty long chunks of content on the accordion, putting it into YAML 's front matter messes it quickly…
No i’m wondering about two things…
-
would it be possible to call another file to be ‘accordioned’ from the front-matter ? or any other hint to ?
accordion:
- title: this is item 1
content: /_faq/accordion-content1.md (?) or whatever option
- title: this is item 2
content: /_faq/accordion-content2.md (?) or whatever options
- would it be possible to nest accordions somehow?
any hint is more than welcomed!
happy jekylling
Thank you for your kind words. Yes, that is possible. Change this:
{% for item in page.accordion %}
Into something like this:
{% for item in site.faqs %}
FAQ’s is a collection you have to create yourself (including a ‘_faqs’ directory with .md files). So it becomes:
<ul class="jekyllcodex_accordion">
{% for item in site.faqs %}
<li><input id="accordion{{ forloop.index }}" type="checkbox" /><label for="accordion{{ forloop.index }}">{{ item.title }}</label><div>{{ item.content | markdownify }}</div></li>
{% endfor %}
</ul>
This way the accordion loops over your custom collection, no front matter required!
Happy coding!
What are the advantages/disadvantages of this technique versus HTML’s <details> element? I’m guessing backwards compatibility is one advantage because <details> is relatively new.
Here’s an example of using <details> with Jekyll’s default Markdown processor, Kramdown, which supports mixed HTML/Markdown via the markdown attribute:
<details markdown=block>
<summary markdown=span>A *Summary*</summary>
These are the **details** for this item.
</details>
This will render as:
A Summary
These are the details for this item.
1 Like
thX @chuckhoupt & @jhvanderschee , so much to learn…
1 Like
I also use details/summary a lot on my site and have written an include for this. But please, where do I find documentation for Kramdown that covers your use of markdown=block/span? Thanking your for broadening my mind :).
The markdown=block/span is documented in the Kramdown Syntax guide in the HTML Block and HTML Spans sections. It’s a Kramdown specific extension to Markdown, which I gather derives from the PHP Markdown Extra extension, which only supported block level Markdown with markdown=1.
Thank you! Somehow I had not found this. So far I had only been using Markdown=0/1.
@jordila rather than marking SOLVED in the subject it would be better to pick an answer and click mark as solution.
Then it will have a checkbox on the main screen
Okey… that’s what looks like (click on Details:) …
in use (mobile look)
4 Likes
