cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Advocate
Community Advocate

Using Code from the Style Guide

I would like to use the Accordion code on a page in a course. 

whatiwant.png

I've copied the code from the first box and pasted it into the page using the HTML Editor.

code1.png

There's a second box with some code that I then pasted below that because I wasn't sure what to do with it.

2nd code.png

Obviously I'm an amateur and doing something wrong :smileyconfused: because I'm not getting the accordion. Any help is greatly appreciated.

preview.png

39 Replies
Highlighted

Hanes.Matthew.B@muscogee.k12.ga.us

I like the look that you have provided with your content.  Can you provide more detail on how that was implemented - I don't intend to go out and try it, I am just trying to learn the way all of this is being done.  Any clarification would be a big help.

Highlighted
Community Advocate
Community Advocate

We like to use cool styling like it's 2015 (or later).

Highlighted
Instructure
Instructure

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. Smiley Happy

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.

Highlighted

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:

Accordions.jpg

Highlighted

Thanks so much for the help and taking the time to share the code!

Janetta

Highlighted
Surveyor

kona@richland.edu​' husband is correct. That second box of code is JavaScript that has to run in order to turn the html content into an accordion. The reason that it didn't work for chofer@morainepark.edu​ is due to the way in which Canvas loads page content. In essence, the reason that just pasting that code into the global JS file won't work is a matter of timing. The code in the global JS file loads and is run before the user content is injected by Canvas. The timing issue makes that simple one line of code to create an accordion a lot more difficult. I'm not quite sure why they approached it this way but the change happened around the time of draft state. When I was writing the code to create accordions and tabbed panels for USU's Custom/Design tools, I ended up writing a series of functions that makes sure the content has loaded and then triggers the JavaScript that I want applied.

I have pulled out and adapted some of my code that should work for creating an accordion.

HTML

Here is what your html would look like:

Normal Accordion

<div class="accordion" id="custom_accordion">

  <h3>Panel 1</h3>

  <div>

       <p>Panel 1 contents.</p>

  </div>

  <h3>Panel 2</h3>

  <div>

       <p>Panel 2 contents.</p>

  </div>

</div>

Mini Accordion

<div class="accordion ui-accordion--mini" id="custom_accordion">

  <h3>Panel 1</h3>

  <div>

       <p>Panel 1 contents.</p>

  </div>

  <h3>Panel 2</h3>

  <div>

       <p>Panel 2 contents.</p>

  </div>

</div>

JavaScript

Here is what would go in your global JavaScript file:

// If any of these elements exist, we will watch for page content in them to load

var pageContentWrappersArray = [

        '#course_home_content', // Course Front Page

        '#wiki_page_show', // Content page

        '#discussion_topic', // Discussions page

        '#course_syllabus', // Syllabus page

        '#assignment_show', // Assignments page

        '#wiki_page_revisions'

    ];

// Commands to run after the page content has loaded

function afterPageContentLoaded() {

    'use strict';

    console.log('Running code');

    // Place the code you want to run here

    // CUSTOM ACCORDION //

    if ($('#custom_accordion').length > 0) {

        // Wrap h3 elements with a link after the fact so it isn't confusing to mobile app users

        $("#custom_accordion h3").each(function () {

            $(this).contents().wrap('<a href="#" />');

        });

        // Create the accordion

        $("#custom_accordion").accordion({header: 'h3'});

    }

}

// Function that will check to see if the page content has loaded yet

function pageContentCheck(pageContentWrapperElement) {

    'use strict';

    var contentLoaded = false;

    // Content Pages

    if ($('.show-content').length > 0 && $('.show-content').children().length > 0) {

        contentLoaded = true;

    // Discussions

    } else if ($('#discussion_topic').length > 0 && $('.user_content').text().length > 0) {

        contentLoaded = true;

    // Assignment (Teacher View)

    } else if ($('#assignment_show .teacher-version').length > 0) {

        contentLoaded = true;

    } else if ($('#assignment_show .student-version').length > 0) {

        contentLoaded = true;

    } else if ($('#course_syllabus').length > 0) {

        contentLoaded = true;

    }

    if (contentLoaded) {

        console.log('Content has loaded');

        afterPageContentLoaded();

    } else {

        setTimeout(function () {

            console.log('Still no content, check again (' + pageContentWrapperElement + ')');

            pageContentCheck(pageContentWrapperElement);

        }, 100);

    }

}

// Run the functions

$(document).ready(function () {

    'use strict';

    // Get Current UserID

    var task,

        i;

    // Identify which page we are on and when the content has loaded

    for (i = 0; i <= pageContentWrappersArray.length; i++) {

        if ($(pageContentWrappersArray[i]).length > 0) {

            // console.log(pageContentWrappersArray[i] + ' Found');

            pageContentCheck(pageContentWrappersArray[i]);

            break;

        }

    }

});

CSS

You will probably need to add some CSS to your stylesheet to counteract the default h3 margins as well as add some padding to the panel content area.

If anyone else has figured out other ways around the content load timing, I would love to hear about it.

Highlighted
Community Coach
Community Coach

I worked with one of our web guys to add that line to the global JS file on Friday, and no luck.  😞

Highlighted
Community Coach
Community Coach

There's a second box with some code that I then pasted below that because I wasn't sure what to do with it. I am NO expert or even a novice on this, but my husband is pretty sure it goes in the global javascript file at the account or sub-account if enabled level. I'm sure someone else can provide a LOT more information/direction on this, but thought I'd at least pass the little I did know along.

Highlighted
Community Coach
Community Coach

I would also like to know how this works...as I was trying out some of the stuff from the StyleGuide on Friday, too.  Some things worked "right out of the box"...some things did not.  😞