Inserting accordions on Catalog listing and program landing pages

[EllaEpshteyn1]

I would like to make our Catalog listing and program pages more attractive and one of the things I am trying to do is create an accordion. I have tried with CSS and JS and without. Multiple ways. The accordion seems to work initially in the program description editor... but as soon as I save, the code gets stripped. Has anyone successfully done this?

[jsowalsk]

@EllaEpshteyn1 I am interested to hear the response on this.

[EllaEpshteyn1]

Interestingly enough, iFrame tags do not get stripped out, so it is possibly to embed html stored elsewhere... or even a SCORM package. Of course, I would prefer a simpler solution.

[jsowalsk]

@EllaEpshteyn1 Can you please provide an example of what you accomplished?

[EllaEpshteyn1]

@jsowalsk not much to show yet - just lots of testing. But, yes, I will share as soon as I have something presentable 🙂

[jsowalsk]

@EllaEpshteyn1 Thank you!! I appreciate it. A visual is always better.

[hechla]

This sounds like a standard instructure code incompatibility. I haven't done much with Catalog yet (just implementing it) but I've been a Canvas admin for 4 years and I've tried various coding tweaks and found that Canvas is very particular about what's allowed and what gets stripped out upon save. And I think accordions were one of those things that Instructure decided was no longer allowed. 

[KellyMCDONALD1]

Hi Ella, Are you adding the CSS and JS to the description box within the Listing or Program page? Or are you adding it to the Catalogue Customisation tab in the custom CSS and Custom JS fields?