# 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:** 20\
**Page:** 1

<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 17, 2020, 1:36am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/1 "2020-06-17T01:36:37Z")

</div>

People,

I have a use case that more resembles a wiki than a blog but I thought Jekyll would still be an appropriate Dev environment for the description in the Subject - has anyone done this already?

Thanks,  
Phil.

---

<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 17, 2020, 10:48am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/2 "2020-06-17T10:48:36Z")

</div>

I think it is easy to implement.

Use HTML and CSS from link here.  
And then redo the HTML with `for` loop for items with say title and description

> **[Implementing A Pure CSS Collapsible](https://alligator.io/css/collapsible/)**
>
> In this post we'll make use of the :checked and adjacent sibling selectors to create an accessible and CSS-only collapsible.

---

<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 17, 2020, 10:52am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/3 "2020-06-17T10:52:29Z")

</div>

I’ve been meaning to do this myself so happy to post here when I solve it but would be good to see how far you can get.

Note that the solution could even be abstracted into a macro in includes or a plugin, making it easy to share with others and use reuse across projects, modifying where needed for relevant structure and extra class names.

---

<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 17, 2020, 2:23pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/4 "2020-06-17T14:23:09Z")

</div>

@MichaelCurrin ,

> [@MichaelCurrin](#):
>
> I’ve been meaning to do this myself so happy to post here when I solve it but would be good to see how far you can get.
> 
> Note that the solution could even be abstracted into a macro in includes or a plugin, making it easy to share with others and use reuse across projects, modifying where needed for relevant structure and extra class names.

Excellent! I found this page:

[Creating an Accordion Plugin for Jekyll - No TV and No Beer](http://mikelui.io/2018/07/22/jekyll-nested-blocks.html)

and I sent the author a note asking if he had a working, “Hello World” that I could look at - but haven’t had an answer yet - maybe that is useful for you?

I look forward to seeing what you do and am happy to co-operate in the dev as much as I can - maybe set up a GitLab repo? - and add it as a new Jekyll Theme?

[Here is my current site that I want to convert to Jekyll](http://philiprhoades.org).

Phil.

---

<div class="post-metadata">

**Author:** ![TerminalAddict](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/terminaladdict/32/1300_2.png) [@TerminalAddict](https://talk.jekyllrb.com/u/TerminalAddict)\
**Post date:** [June 17, 2020, 8:56pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/5 "2020-06-17T20:56:57Z")

</div>

so you just want a bootstrap type accordion setup ?

I’m not really sure what you’re asking for?  
If it is a bootstrap accordion type thing, you need to create a loop

```auto
<aside>
              <h4>Archives</h4>
<div id="accordion" class="archivesAccordian">
{% assign postsByYear = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
{% for year in postsByYear %}
        <div class="card">
                <div class="card-header p-0" id="y{{ year.name }}">
              <h5 class="mb-0">
              <button class="btn btn-link w-100 dark-blue-link p-3{% unless forloop.first %} collapsed{% endunless %}" data-toggle="collapse" data-target="#m{{ year.name }}" aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" aria-controls="m{{ year.name }}">
                  <span data-toggle="tooltip" data-original-title="Show posts from {{ year.name }}" data-placement="bottom">{{ year.name }}</span>
                </button>
              </h5>
            </div>
            <div id="m{{ year.name }}" class="collapse {% if forloop.first %}show{% endif %}" aria-labelledby="y{{ year.name }}" data-parent="#accordion">
              <div class="card-body">
                        <div class="list-group">
  {% assign postsByMonth = year.items | group_by_exp:"post", "post.date | date: '%B'" %}
  {% for month in postsByMonth %}
    {% for item in month.items limit: 1 %}
                <a class="list-group-item list-group-item-action" href="{{ site.url }}/{{ item.date | date: '%Y/%m' }}/" data-toggle="tooltip" data-original-title="Show posts from {{ month.name }} {{ year.name }}" data-placement="bottom">{{ month.name }}</a>
    {% endfor %}
  {% endfor %}
                        </div>
                  </div>
        </div>
        </div>
{% endfor %}
</div>
            </aside>

```

---

<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 17, 2020, 9:17pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/6 "2020-06-17T21:17:17Z")

</div>

The accordion plugin tutorial looks nice. See if the author posted any complete example on a github repo

If you don’t want to write a plugin then you can use the approach i sent which includes or the answer above for bootstrap

---

<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 21, 2020, 7:25pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/7 "2020-06-21T19:25:22Z")

</div>

For an accordion I use the html `<details>` tag. These tags can be nested. Inside the tag you can use regular markdown syntax and format equations.

Create a file called details.html with these lines and save it in your \_includes folder,

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

```

Copy/paste these lines into your markdown file,

```auto
{% capture details %}
DETAILS
{% endcapture %}
{% capture summary %}SUMMARY{% endcapture %}{% include details.html %}

```

Fill in DETAILS and SUMMARY with your content.

Description, examples, and styling: [https://spinningnumbers.org/a/details.html](https://spinningnumbers.org/a/details.html)

---

<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 23, 2020, 7:33pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/8 "2020-06-23T19:33:14Z")

</div>

Nice.

I have been using details and summary a lot lately. It will take work to ensure only one at a time is open rather than individually open and close them but the accordion behavior is there

Also the capture syntax is unnecessary.

Rather pass arguments.

```auto
{% include details.html
    title = "This is my title"
    description = "This is my description"
%}

```

Where details.html is

```auto
<details>
<summary>{{ includes.title }}</summary>

{{ includes.description }}
</details>

```

---

<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, 8:33am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/9 "2020-06-26T08:33:33Z")

</div>

People,

Thanks for the responses - I tried @willymcallister 's version first but got an error and without putting in any effort to sort that out I went to @MichaelCurrin 's version where I did, indeed, get a working accordion - but unfortunately with a blank title and description . . from a new app using your details.html and \_posts/2020-06-26-test.markdown:

```auto
---
layout: post
title: "test"
date: 2020-06-26 18:00:00 +1000
categories: test
---

{% include details.html
    title = "This is my title"
    description = "This is my description"
%}

```

Am I missing something?

Thanks,  
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 26, 2020, 8:42am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/10 "2020-06-26T08:42:02Z")

</div>

@TerminalAddict ,

I did get this to work as is, but I will have to add more posts to see if it is doing what I want.

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, 9:15am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/11 "2020-06-26T09:15:48Z")

</div>

Oh sorry in the details.html file it should `include.title` not `includes.title`

---

<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, 9:20am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/12 "2020-06-26T09:20:20Z")

</div>

> [@MichaelCurrin](#):
>
> Oh sorry in the details.html file it should `include.title` not `includes.title`

Ah . . I should have seen that - working now . .

Thanks for the fast response!

---

<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, 9:34am UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/13 "2020-06-26T09:34:56Z")

</div>

@MichaelCurrin ,

OK, so I can have multiple accordions and I am not so concerned about opening one and that causing the automatic closing of an already open other accordion but I do want to be able to nest the accordions - is that possible with your setup? - I tried a couple of things that didn’t work . .

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, 1:07pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/14 "2020-06-26T13:07:16Z")

</div>

Sorry I didn’t look into the nesting part

---

<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, 1:11pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/15 "2020-06-26T13:11:51Z")

</div>

The nesting works. Example I added here (without Jekyll)

> <https://github.com/MichaelCurrin/static-sites-generator-resources/blob/master/Jekyll/accordion.md#nesting>

---

<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, 1:16pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/16 "2020-06-26T13:16:19Z")

</div>

Oh wow! Thanks for that!

I will look more closely at it and then when what you have done makes sense to me, see how I go about adding indentations for the lower nests and coloured and bordelined title bars etc.

Thank you - it is much appreciated!

**Update:** I actually had something like that before but it didn’t work - I will have to work out why . .

---

<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:14pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/17 "2020-06-26T16:14:22Z")

</div>

After a bit of reformatting so I could better read the code and adding some posts, I got something working - but there are a few issues - see this image:

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

- There doesn’t appear to be any accordion behaviour
- The buttons don’t appear to do anything when pressed
- When I click on say “2019 - June” I get a HTML dir listing of what is in “/2019/06” - in this case another HTML dir listing with “26” - if I click on that ("/2019/06/26") I see my test post . . and clicking on that finally displays like a normal Jekyll post . .

Am I missing something?

Thanks,  
Phil.

---

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

</div>

Are you use the details/summary approach? I’d say get the accordions to work with that (as no CSS is needed and it will open and close for you) and then later adding styling like making it look like a button.

I don’t know you’ve generated your listing with code so I can’t comment on much. This is the first time you’re bringing in posts as well. Can you use some generic data YAML file in `_data `to build up your nested accordion and share that data and HTML?

---

<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:28pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/19 "2020-06-26T16:28:57Z")

</div>

Also a repo link would help a lot.

also before building up a styled lists of posts, you might want to just solve the problem of how to nest dummy YAML data in an unstyled nested accordion like the one in my guide.

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.

Then turn that into a `for` loop so you can pass many outer items which have inner items.

You could do this with a single includes and pass it nested YAML data.

---

<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:29pm UTC](https://talk.jekyllrb.com/t/anyone-already-done-a-nested-accordion-hello-world-for-jekyll/4595/20 "2020-06-26T16:29:27Z")

</div>

> [@MichaelCurrin](#):
>
> Are you use the details/summary approach?

Not for that exercise - I just used @TerminalAddict 's code as is.

> [@MichaelCurrin](#):
>
> I’d say get the accordions to work with that

Although simple stuff worked, as soon I it got a little more complicated I had problems so I looked at @TerminalAddict ’ s stuff because he said loops were already set up - but obviously I am having problems with that code too . .

> [@MichaelCurrin](#):
>
> Can you use some generic data YAML file in `_data ` to build up your nested accordion and share that data and HTML?

I have just been creating posts manually - I haven’t used a YAML file for doing that before . .

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