Anyone already done a Nested Accordion Hello World for Jekyll?

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,

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

Copy/paste these lines into your markdown file,

{% 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

1 Like

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.

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

Where details.html is

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

{{ includes.description }}
</details>
1 Like

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:

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

1 Like

@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!

1 Like

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

1 Like

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

Thanks for the fast response!

1 Like

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

Sorry I didn’t look into the nesting part

2 Likes

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

1 Like

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

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

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

1 Like

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?

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.

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

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

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

Did you load bootstrap.css ?

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

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

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

eg?

Thanks.

See data files in docs

1 Like

One implementation using nested data would let you do this

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

{% 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

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

Where _data/foo.yml is:

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

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.

@MichaelCurrin ,

I have started this:

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

Help?