Anyone already done a Nested Accordion Hello World for Jekyll?

Help
#13

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

#14

Sorry I didn’t look into the nesting part

2 Likes
#15

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

1 Like
#16

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

#17

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
#18

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?

#19

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.

#20

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

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