Accordion menu inside Quire page

[ncamachoh]

Hi!

I am working on a new project and was wondering if anyone can help me make accordion menus work!
I have managed to add the html tags and css but for some reason they won't actually expand, so I just end up with titles in boxes, without any of the content.

I tried adding the js to the _assets> javascript >/*custom.js page, but it won't read it, and if I add it directly under the content it breaks the preview!

I am not a developer so this is were I got the instructions: https://www.w3schools.com/howto/howto_js_accordion.asp

Thanks!

[geealbers]

@ncamachoh, I'm afraid we haven't documented adding custom JavaScript to projects yet and it can be a little tricky. When you said you tried adding it directly under the content, did you surround it in <script> tags, like in the example here?: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate

Also, depending on your timing, we're actually just starting on building accordion page sections ourselves and they will be a part of core Quire. So available for everyone. We haven't established a definitive deadline for getting them done, but I would guess within the next 3–4 months.

[ncamachoh]

Thanks for your reply, Greg!

Yes, I did use the script tags just like the example. An in the custom.js page I tried both with and without the tags as well, but none of these worked.
I think we could wait it out! I assume I would have to update Quire and node to the latest version to get the accordion page sections working?

[rrolonNelson]

@ncamachoh I am not sure what type of accordions you are wanting on your page but we have added collapsible items in the content on our pages. This can be accomplished in markdown files using details and summary html tags that are styled with css. Here is an example https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab.

[cbutcosk]

Huge +1 to this, detail / summary also has much better accessibility characteristics and no wonky focus behaviors

[ncamachoh]

Thank you so much! I'll check it out!

[Erin-Cecele]

Good news @ncamachoh, we have officially incorporated accordion sections into Quire. We now have an accordion shortcode that generates detail/summary semantic HTML elements, similar to what @rrolonNelson and @cbutcosk mention above. You can find documentation here: https://quire.getty.edu/docs-v1/accordions/. To incorporate this in your project, follow the "Update An Existing Project" instructions in our docs: https://quire.getty.edu/docs-v1/install-uninstall/#update-an-existing-project.

[ncamachoh]

Amazing news! Thank you so much! I will begin to work on it