# Anyone already done a Nested Accordion Hello World for Jekyll?

**URL:** <https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595>\
**Category:** Help\
**Created:** [June 17, 2020, 1:36am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595 "2020-06-17T01:36:37Z")\
**Posts on this page:** 17\
**Page:** 2

<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:** [June 26, 2020, 4:30pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/21 "2020-06-26T16:30:40Z")

</div>

Did you load bootstrap.css ?

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 26, 2020, 4:34pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/22 "2020-06-26T16:34:38Z")

</div>

> [@MichaelCurrin](#):
>
> Also a repo link would help a lot.

Ah yes - good idea - it is getting more messy than I thought it would . .

> [@MichaelCurrin](#):
>
> For one outer item:
> 
> - Open the details and summary
> - insert multiple inner items
> - close the details tag
> 
> Then copy and paste as a second outer item.

That worked for simple stuff but then I couldn’t work out how to do loops for accordions with different numbers of sub-accordions . .

> [@MichaelCurrin](#):
>
> Then turn that into a `for` loop so you can pass many outer items which have inner items.

Yep . . that’s what I couldn’t work out . .

> [@MichaelCurrin](#):
>
> You could do this with a single includes and pass it nested YAML data.

eg?

Thanks.

---

<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:** [June 26, 2020, 4:37pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/23 "2020-06-26T16:37:00Z")

</div>

See data files in docs

> **[Data Files](https://jekyllrb.com/docs/datafiles/#example-list-of-members)**
>
> In addition to the built-in variables available from Jekyll, you can specify your own custom data that can be accessed via the Liquid templating system.

---

<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:** [June 26, 2020, 4:41pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/24 "2020-06-26T16:41:07Z")

</div>

One implementation using nested data would let you do this

This won’t work exactly with unpacking data but its the idea

```auto
{% for outer in site.data.foo %}
{% include nested_accordion.html title=outer.title 
     description=outer.description 
     inner_items=outer.items
%}
{% endfor %}

```

Where nested\_accordion.html will do

```auto
<details>
<summary>{{ include.title}} </summary>
{% for inner in include.inner %}
 <details>
<summary>{{ inner.title }}</summary>
</details>
{% endfor %}
</details>

```

Where `_data/foo.yml` is:

```auto
- title: 'A'
  description: '...'
  inner:
    - title: 'Inner a'
      description: '...'
    - title: "Inner b"
      description: '...'
- title: 'B'
  description: '...'
  inner:
    - title: 'Inner d'
      description: '...'
    - title: "Inner e"
      description: '...'

```

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 26, 2020, 4:44pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/25 "2020-06-26T16:44:10Z")

</div>

I just read that ref doc and what you have now posted looks sensible - but it is 2:42am here (Sydney time) and I have been missing sleep lately and am having trouble keeping my eyes open . . I will have to continue this tomorrow (later today!) . .

Thanks for all the help again!

Phil.

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 27, 2020, 2:18pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/26 "2020-06-27T14:18:43Z")

</div>

@MichaelCurrin ,

I have started this:

> **[Projects · Philip Rhoades / ja\_01](https://gitlab.com/philip_rhoades/ja_01)**
>
> Jekyll Accordion #01 - minimal

and made some progress with at least listing data but I can’t see how to make the accordion work . .

Help?

---

<div class="post-metadata">

**Author:** ![willymcallister](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/willymcallister/32/180_2.png) [@willymcallister](https://talk.jekyllrb.com/u/willymcallister)\
**Post date:** [June 27, 2020, 11:51pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/28 "2020-06-27T23:51:44Z")

</div>

@philiprhoades, @MichaelCurrin  
Edit: I fixed a mistake in my version of \_include/details.html. Sorry for distracting you earlier. It should look like this (remove the {% raw %} statements) …

```auto
<details>
    <summary>{{ summary | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
    {{ details | markdownify }}
</details>

```

This version naturally nests. (However, I don’t know how to apply different styles to nested levels.)

I’ve had good success using {capture} syntax in my markdown template vs. the more compact {include details.html} title = “This is my title”.

With the {capture} version I am able to use markdown syntax **inside** _the tag_, and get Katex equations processed and displayed. The last little perk is I never forget the closing "! Perhaps it is possible to include the “markdownify” filter in the simpler include command, but I have not figured out how.

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 28, 2020, 12:42am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/29 "2020-06-28T00:42:36Z")

</div>

Ok, now I am confused - there is no file:

> [@willymcallister](#):
>
> \_include/details.html

only:

> \_include/nested\_accordion.html

like in your example . . are you looking at my GitLab repo?

Thanks.

---

<div class="post-metadata">

**Author:** ![willymcallister](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/willymcallister/32/180_2.png) [@willymcallister](https://talk.jekyllrb.com/u/willymcallister)\
**Post date:** [June 28, 2020, 12:56am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/30 "2020-06-28T00:56:09Z")

</div>

@philiprhoades Yes I looked at your repo. These two file names are different names for the same role. My recent post fixed an error I made way back earlier in this string. Just wanted to set the record straight. The fix might not drop into your current repo without modification. I have not fully absorbed the nesting in your nested\_accordion.html file.

When I say my version “naturally nests” that means if you insert the markdown template inside the DETAILS section of another template it will work as expected. I don’t know how it responds to a clever looping structure. I will give it a think.

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [June 28, 2020, 1:58am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/31 "2020-06-28T01:58:23Z")

</div>

> [@willymcallister](#):
>
> Yes I looked at your repo. These two file names are different names for the same role.

Oh right . .

> [@willymcallister](#):
>
> I don’t know how it responds to a clever looping structure. I will give it a think

OK - I want to get some practise with working with other people on Git - could you do pull requests for your changes to my repo? That way the changes will also be quite clear to me because I can easily do diffs etc . .

---

<div class="post-metadata">

**Author:** ![willymcallister](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/willymcallister/32/180_2.png) [@willymcallister](https://talk.jekyllrb.com/u/willymcallister)\
**Post date:** [July 1, 2020, 12:01am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/32 "2020-07-01T00:01:14Z")

</div>

@philiprhoades - I submitted a merge request to your repo. Modified index.md plus two new files, \_includes/details.html and \_posts/2020-06-27-Sample-post.md.

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [July 1, 2020, 1:37am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/33 "2020-07-01T01:37:30Z")

</div>

Cool! I will have look when I get home . .

Thanks!

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [July 3, 2020, 5:25am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/34 "2020-07-03T05:25:28Z")

</div>

> [@willymcallister](#):
>
> I submitted a merge request to your repo. Modified index.md plus two new files, \_includes/details.html and \_posts/2020-06-27-Sample-post.md.

Not sure what is going on - I merged the pull request and then pulled to my local machine but didn’t see anything new - when I looked more closely on GitLab, the only thing that has been added is:

```auto
1 merge request!1Add new directory
Showing 1 changed file with 0 additions and 0 deletions
_articles/.gitkeep 0 → 100644

```

? Have I missed something?

---

<div class="post-metadata">

**Author:** ![willymcallister](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/willymcallister/32/180_2.png) [@willymcallister](https://talk.jekyllrb.com/u/willymcallister)\
**Post date:** [July 3, 2020, 3:06pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/35 "2020-07-03T15:06:03Z")

</div>

I submitted another merge request. From my end it looks like it includes 3 new files. You can also find them in my branch of your repo, `willymcallister/ja_01:master`

If that doesn’t work, here are the files…

\_includes/details.html

```
<details>
    <summary>{{ summary | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
    {{ details | markdownify }}
</details>

```

\_posts/2020-06-27-Sample-post.md

```
---
layout: post
title: "Test Post"
date: 2020-06-27 23:15:38 +1000
categories: jekyll update
---
This is a test post in the `_posts` directory. 

This is fascinating content.

```

Append these lines to index.md

```
**List of posts**  
  
{% for p in site.posts %}  
{% capture details %}  
  {{ p.excerpt }}  
  {% capture details %}  
  {{ p.url }}  
  {% endcapture %}  
  {% capture summary %}{{ p.path }}{% endcapture %}{% include details.html %}  
  {% endcapture %}  
{% capture summary %}{{ p.title }}{% endcapture %}{% include details.html %}  
{% endfor %}
```

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [July 4, 2020, 8:04am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/36 "2020-07-04T08:04:45Z")

</div>

> [@willymcallister](#):
>
> I submitted another merge request. From my end it looks like it includes 3 new files.

Ah! - got it all this time and merged and now I see what you have done is working - I will have a closer look tomorrow - thanks!

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [July 14, 2020, 4:32pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/37 "2020-07-14T16:32:46Z")

</div>

@willymcallister ,

I have run out of time again and, to get a current job done, I will have to use something that is already going and looks nice with the default Jekyll theme. I found this:

[https://www.codehim.com/demo/beefup-jquery-nested-accordion/](https://www.codehim.com/demo/beefup-jquery-nested-accordion/)

which I got going (with some minor CSS glitches) here:

[ja\_02](https://philip_rhoades.gitlab.io/ja_02)

and reduced to the minimum that I need for the time being here:

[ja\_03](https://philip_rhoades.gitlab.io/ja_03)

Two things to do:

- Work out why the last nested item always displays when it shouldn’t
- How to get the accordion items to correspond to two levels of dir structure in \_posts

I am out of action waiting for a routine medical procedure ATM but will get back to this when I get out of hospital in a day or so . . but feel free to update with pull requests if you can!

Thanks!

Phil.

---

<div class="post-metadata">

**Author:** ![pippim](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pippim/32/4089_2.png) [@pippim](https://talk.jekyllrb.com/u/pippim)\
**Post date:** [December 14, 2021, 3:43am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/38 "2021-12-14T03:43:10Z")

</div>

This animated accordion seems complicated but it looks great. Do you know if anyone has a GitHub Pages using it for blog posts? I’m thinking Alphabetical `A-B-C`, `D-E-F` …, Tags `A-B-C` which expand into `Apple`, `Applications`, `Bash`, etc. and Date `2021`, expands into `December`, November`, etc. Hope that makes sense.

[Previous page](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595.md?page=1)