# 'Accordion(ed)' collections - 'front-matter' driven

**URL:** <https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897>\
**Category:** Help\
**Created:** [April 18, 2021, 8:35am UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897 "2021-04-18T08:35:40Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jordila](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jordila/32/3488_2.png) [@jordila](https://talk.jekyllrb.com/u/jordila)\
**Post date:** [April 18, 2021, 8:35am UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897/1 "2021-04-18T08:35:40Z")

</div>

Hi jekyllers,

I’m enjoying how @jhvanderschee[approaches ‘Accordions’](https://jekyllcodex.org/without-plugin/accordion/)…

example 🙂

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/8/8ac9cc45b41cd04652a773431e085b653f9c23a1.png)

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](https://jekyllcodex.org/without-plugin/accordion/)

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…

1. 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

* * *

1. would it be possible to nest accordions somehow?

any hint is more than welcomed!

happy jekylling

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [April 18, 2021, 10:06am UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897/2 "2021-04-18T10:06:00Z")

</div>

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](https://jekyllrb.com/docs/collections/) 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!

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [April 18, 2021, 12:53pm UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897/3 "2021-04-18T12:53:46Z")

</div>

What are the advantages/disadvantages of this technique versus [HTML’s `<details>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)? I’m guessing backwards compatibility is one advantage because [`<details>` is relatively new](https://caniuse.com/details).

Here’s an example of using `<details>` with Jekyll’s default Markdown processor, Kramdown, which supports mixed HTML/Markdown via the `markdown` attribute:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![jordila](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jordila/32/3488_2.png) [@jordila](https://talk.jekyllrb.com/u/jordila)\
**Post date:** [April 18, 2021, 1:18pm UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897/4 "2021-04-18T13:18:52Z")

</div>

thX @chuckhoupt & @jhvanderschee , so much to learn…

---

<div class="post-metadata">

**Author:** ![michaelbach](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelbach/32/2151_2.png) [@michaelbach](https://talk.jekyllrb.com/u/michaelbach)\
**Post date:** [April 21, 2021, 5:11am UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897/5 "2021-04-21T05:11:12Z")

</div>

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 :).

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [April 21, 2021, 11:12am UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897/6 "2021-04-21T11:12:05Z")

</div>

The `markdown=block/span` is documented in the Kramdown Syntax guide in the [HTML Block](https://kramdown.gettalong.org/syntax.html#html-blocks) and [HTML Spans](https://kramdown.gettalong.org/syntax.html#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`.

---

<div class="post-metadata">

**Author:** ![michaelbach](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelbach/32/2151_2.png) [@michaelbach](https://talk.jekyllrb.com/u/michaelbach)\
**Post date:** [April 21, 2021, 5:35pm UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897/7 "2021-04-21T17:35:15Z")

</div>

Thank you! Somehow I had not found this. So far I had only been using Markdown=0/1.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [April 22, 2021, 6:18am UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897/8 "2021-04-22T06:18:58Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![jordila](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jordila/32/3488_2.png) [@jordila](https://talk.jekyllrb.com/u/jordila)\
**Post date:** [April 23, 2021, 10:54am UTC](https://talk.jekyllrb.com/t/accordion-ed-collections-front-matter-driven/5897/9 "2021-04-23T10:54:19Z")

</div>

Okey… that’s what looks like (click on Details:) …

> ****
>
> in use (mobile look) 🙂  
> ![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/5/5dcbcb9adc0d57ccbe55e59f9b267633955e946c.png)