Anyone already done a Nested Accordion Hello World for Jekyll?

Help
21

Did you load bootstrap.css ?

22

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.

23

See data files in docs

1 Like
24

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: '...'
25

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.

26

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

28

@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) ā€¦

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

29

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

only:

_include/nested_accordion.html

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

Thanks.

30

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

31

Oh right . .

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

32

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

1 Like
33

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

Thanks!

34

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:

1 merge request!1Add new directory
Showing ļæ¼1 changed file with 0 additions and 0 deletions
_articles/.gitkeep ļæ¼0 ā†’ 100644

? Have I missed something?

35

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 %}
36

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!

37

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

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

ja_02

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

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.

38

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.