Javascript accordion for blog posts, assigning div id

Hello,
thanks in advance for any advice.
I'm quite new to this, learning html and css and trying to make a theme for grav that serves my purposes.
I'm using the w3.css framework because I've found their web site useful and they keep the vocabulary simple.

For my blog posts I want to display a headline that can be clicked on to show the first paragraph of the post so on arrival the blog is a list of headlines. Click one and it expands, click another and it expands.

I'm using this accordion feature of w3.css and I've put that code, slightly modified into my blog_item.html.twig file where I want to list the blog posts.

It's working, cosmetically, I can see the list of blog posts. When I click the top one it opens the accordion. When I click it again it closes. But when I click the next one it opens the top one again, and clicking it closes the top one.

To explain again, there are three blog posts: 1, 2, and 3. Clicking 1 opens the accordion for 1. Clicking 2 opens the accordion for 1. Clicking 3 opens the accordion for 1.

I'm assuming that this has something to do with the id that is used in the script - Demo1 - (see the w3c accordian page here) and that the process of listing the blog entries in blog.html.twig is repeatedly using the same id - Demo1.

Am I correct? Is there some way of applying a new id for each blog post so that this does not occur?

Or am I way off?

Thanks so much for any suggestions. bye
Adam

@pamtbaau - thanks, that's really helpful.

All of that has worked except one slight problem. It needs apostrophes around the {{ blogItem.slug }} in the onclick command - I think. It doesn't work for me without them.

Also, my blog item slug is not blogItem.slug it is page.slug - I'm not sure why - is it how I am creating pages?

I need to read up on how to "turn something into a Twig partial" - I think I get the basics of it from messing around but I'm worried that bits of code I'm adding to these twig pages are in the wrong place / badly organised.

Also, I've just shoved the javascript for the accordion at the bottom of base.html.twig, underneath
{% block bottom %}
{{ assets.js('bottom') }}

and I feel like it should go somewhere else.

Anyway, thanks for that pamtbaau, really good.

bye
Adam

@adamburton Glad to hear the push was indeed in the right direction for you...

Thanks for pointing out the omission of the single quotes required in the function call. I've corrected the example.

With respect to the 'blogItem.slug' vs 'page.slug':
I don't know how your template code looks like and where you get your blog item collection from... Would you mind sharing it?

With respect to the position of the script:
Including scripts at the bottom of the page is usually a good place. Your script will not be needed until the entire page is loaded and the user can click the accordion.

@pamtbaau - thanks so much.

I'm planning on putting the theme on github but I need to work out how to do that first. When I've done so I'll post a link here. I'm very much at the beginning of a steep learning curve.

Unless, there is a specific file I can paste here somehow, I'm not sure which it is that you need.

thanks, bye
Adam

@pamtbaau - hello

I've uploaded my theme to github - I think. I'm not really familiar with the platform.
I'll hopefully be able to work out how to use it properly but you're welcome to have a look at what I've uploaded.

Perhaps I've not uploaded the parts of grav that you need to see to understand my blog item collection. So perhaps it's no help, but anyway, thanks.

I have a question about the page.menu that I'm trying to set up in my theme but I'll ask that in a separate post.

thanks for looking, bye
Adam

@adamburton I have looked at the theme in your repo and on first sight I found no obvious issues. You might have feared a steep learning curve, but it all seems to go just fine...

@pamtbaau - thanks, that's good to know. Your advice is making it much more manageable, and knowing that there's somewhere to ask questions, where the questions actually get answered, really makes a difference for someone like me who doesn't have the background knowledge.

cheers, see ya,
Adam