I would like to use the Accordion code on a page in a course.
I've copied the code from the first box and pasted it into the page using the HTML Editor.
There's a second box with some code that I then pasted below that because I wasn't sure what to do with it.
Obviously I'm an amateur and doing something wrong :smileyconfused: because I'm not getting the accordion. Any help is greatly appreciated.
Mine is not nearly as thorough as yours but accordions appear to work in our test environment. One thing I've noticed is that the accordions seem not to work if you navigate to another page and press the back button to return to the page with the accordions. Refreshing the page will then bring the accordions back. We haven't tried anything in our production environment yet because I'm still playing around with it. I added only this to our javascript to get it to work:
/*
Activate Accordions
*/
$(document).ready(function(){
$('div.accordion-custom').accordion({heightStyle: "content"});
});
If you place any content below the accordion, it would create a blank space that was as big as the largest piece of accordion content so I had to add that heightStyle line in order to prevent that from happening.
Then I've always found it incredibly obnoxious to click on an accordion and have it expand into the middle of that accordion's content if it's a large amount of content. So I added this code to automatically scroll to the Accordion's header after the accordion expands:
/*
Scroll to top of accordion
*/
$( "#accordion-custom" ).accordion({
heightStyle: "content",
collapsible: true,
active: false,
activate: function( event, ui ) {
if(!$.isEmptyObject(ui.newHeader.offset())) {
$('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
}
}
});
Then I was just playing with styling the accordions so they are little more eye-catching for our Elementary students. The resulting accordions looks like this:
The Canvas Styleguide is actually for the design of Canvas itself and not for content created inside Canvas. Some things in the styleguide will work in the rich-content editor but much (perhaps most?) of it will not. Proceed at your own risk. 
That being said, I really love that there are faculty and instructional designers trying new and interesting things in content design. Giant boring walls of text are so over.
Maybe this would help?
Here's some code you can use on the page itself (without doing anything to the global javascript) with the HTML editor. Note: There is an issue with the sizing of accordion tabs using this code. The sizing of each content tab will default to the largest content tab. If anyone has a fix to this I would love to see it! See picture below code.
Code:
<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>
Sizing Example:
Yes, I will add it. I'm just still playing catch-up on everything else from InstructCon
Janetta:
This is the code that I use, and have included in the CanvasHacks Demo Course:
<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>
It produces the following results:
There is an issue with the sizing of accordion tabs using this code. The sizing of each content tab will default to the largest content tab, but it does work in a Canvas page. And yes, you can embed videos, images even complex text formatting on each tab.
I hope this helps,
KLM
