[ARCHIVED] Style guide accordion

[g_scully]

Hello has the accordion feature been removed? I can see the tab for it on the style guide but id does not seem to exist.

Thanks in advance.

[jdick1]

Yeah, I think it's dead per this discussion...unfortunately. (Dear Canvas, it would be very, very awesome to bake in some of these common info organization conventions without making us write our own JS because not all of us have access to developers, please and thank you)

Possible workaround: H5P has an iframe-based accordion widget. Drawback: it's kinda ugly and height defaults to the maximum extended size of the accordion, so it only really works if it's at the bottom of the page or in a column of its own (which I just thought of but haven't tested). I'm also unsure of how accessible it is. (I don't use it, so I haven't tested it.)

[g_scully]

Thanks for the reply Jen, it's a shame there are a few style guide features no longer supported. I'll take a look at the work-arounds. 

[ddumonde]

My institution just adopted the awesome suite of tools from Cidi Labs | Instructional Design Tools for Canvas . I just organized our too-long Get Help page with their awesome accordion and am doing my happy dance      !

[danielcktan]

The accordion is uses JQuery UI.

At the moment, JQuery UI is still loaded in Canvas. You can enable accordion by adding the following code to your Theme Custom JS for desktop and mobile.

// Activate Accordion within Canvas

$('.enhanceable_content.accordion').accordion({ heightStyle: "content", autoHeight: false, collapsible: true, active: false });

$(window).resize(function(){

  // update accordion height

  $('.enhanceable_content.accordion').accordion( 'resize' )

});

[danielcktan]

Instructure has since remove support for accordion.

See this comment on how to restore accordion on your Canvas instance.