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.
1 Like
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
2 Likes
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.
2 Likes
Excellent! I found this page:
Creating an Accordion Plugin for Jekyll - No TV and No Beer
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.
Phil.
2 Likes
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
<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>
1 Like
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
1 Like
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
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
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)
2 Likes
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:
- 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 . .