Accordion code

[gailc]

Looking to create an accordion menu similar to below screenshot using HTML. Any suggestions would be appreciated.

[robotcars]

I'd start here.

Inclusive Components - Collapsible Sections 

Inclusive Design Principles 

[gailc]

Thanks, I'm not a developer - is there HTML that would work for this?

[robotcars]

Unfortunately not. The only way to make this work is a combination of HTML and JavaScript.

Here are some plug-n-play options, might cost.

Accordion | H5P

E-Learning Software and Authoring Apps - Articulate

[ronmarx]

Accordions (2 types) and tabs are basic features of #Cidi_Labs #cidi_labs‌ #design tools‌ SaaS product. Very elegant and customizable so overall design themes are maintained. A Google search will show you their website.

[gailc]

Expander functionality would be great. Assuming there is a cost to grab code?

https://cidilabs.instructure.com/courses/102/pages/add-accordion-panels-and-tabs

[akinsey]

This just changed my day. Thank you carroll-ccsd‌!

[robotcars]

Cool! Which option are you considering?

[akinsey]

I plan to try to use the Collapsible Sections as a template. That way, I can use a <template> tag when I want to the accordions to work rather than every time there's an <h3> it shows up like an accordion. That's the theory, at least.

[robotcars]

I'd love to know how your progress goes getting this into Canvas. Please let me know and/or post your progress and maybe we can collaborate on it.

[akinsey]

So tried to make this work. Unfortunately, it looks like the RCE is blocking the <main> and <toggle-section> tags so the current setup is not working. Looking at some options to make it work, but wanted to alert you to the wall we've hit.

[robotcars]

Would you mind sharing the progress of the code and we see if there's a workaround? Hopefully, without completely destroying the accessibility.

[akinsey]

We just started with using the original code from your link: Collapsible Sections 

So I'm not sure how it needs to be tweaked at the moment, but it'll be changing out the class sections.

This is the specific sections that seemed to be breaking: 

<main>
<toggle-section open="false">

Thanks!

[kaileyb]

I know this post was a bit ago, but I have been searching for the same thing! The last school I worked for as an ID had Cidi labs, which is what your screenshot looks like. It is SO nice! 

I found this thread with the closest alternative: https://community.canvaslms.com/thread/21407-making-accordion-collapsed-by-default