Accordion Learning Objects

[dlourcey]

Hello wonderful community,

I have tried to find html for building an accordion learning object. I have used H5P but since they have changed their terms of use, embedding on the free account will no longer be available. I have tried Bootstrap Build, but to no avail. I have also looked the Canvas Resources course the ID community put out, but I can't find a solution to creating accordion learning objects that is user friendly to a novice html admin.

Any help? Any suggestions?

[kmeeusen]

Hi  @dlourcey  

We used to have an HTML hack for accordion tabs in our CanvasHacks classroom and my original Do Not Fear the Code course, but it has been deprecated by Canvas, and no longer works.  I will share the snippet below, and if you are handy with HTML you might be able to get it to work.

<div class="enhanceable_content accordion">
<h3><a href="#">TYPE TITLE TO FIRST ACCORDION TAB</a></h3>
<div>
<p>TYPE CONTENT FOR FIRST ACCORDION TAB</p>
</div>
<h3><a href="#">TYPE TITLE TO SECOND ACCORDION TAB</a></h3>
<div>
<p>TYPE CONTENT FOR SECOND ACCORDION TAB</p>
</div>
<h3><a href="#">TYPE TITLE FOR THIRD ACCORDION TAB</a></h3>
<div>
<p>TYPE CONTENT FOR THIRD ACCORDION TAB</p>
</div>
</div>

Also, you will want to check out InstUI: Instructure's Style Guide 2.0

Kelley

[dlourcey]

Hey Kelley,

I really appreciate your quick response. I have tried that code before and this is what I get when I hit save. I must be doing something wrong and requires more than a simply copy and paste job.

[kmeeusen]

Yep, me too, and I miss our old hacks.

I would check out InstUI 2.0

Kelley