Using jQuery without Custom Javascript

jperkins · ‎07-01-2015

Please note that Instructure is no longer using jQuery in their designs or development. jQuery is presently part of Canvas and Instructure currently has no plans to change this. jQueryUI is a separate library that has historically been available in Canvas. This library's usage in Canvas is actively being deprecated, and institutions should not rely on its availability.

A couple of weeks ago, it came to my attention from Community Member awebster that we have code built into Canvas that allows for running some jQuery content like tabs and accordions. I was under the impression, even as a Canvas Trainer, that the only way to leverage these was to use custom Javascript. It turns out that I was wrong. I was digging around in Github and found a lot of awesome code related to this enhanceable_content. See the original file here. Be aware that at the time of this post these will not respond the same on mobile devices.

Also, be aware that you will probably need some HTML background to really leverage these tools. If you want a good tool to get some basics of HTML, I recommend this Codecademy Course. I've modified the tags slightly from the source file to include padding around elements for better aesthetics.

Note! - If the code is different in the sample page than the code listed below, I include the code on the sample page. The code on this page was kept basic to better illustrate how the code works, not to be an example of what you can do with the code.

Tabs - See this in action here. Be aware that you'll want to use paragraph and header tags for text inside of the content <div> tags. Also, this looks very different in the Rich Content Editor than it does after it is saved.

<div class="enhanceable_content tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a>
        </li>
        <li><a href="#fragment-2"><span>Two</span></a>
        </li>
        <li><a href="#fragment-3"><span>Three</span></a>
        </li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default: This is Tab 1 Content.</p>
    </div>
    <div id="fragment-2">
        <p>Tab 2 Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <div id="fragment-3">
        <p>Tab 3 Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
</div>

Accordion - See this in action here. Notice that content areas will be as big as the largest content area in any section of the Accordion. This is because of the version of jQuery that Canvas is running. No easy way to fix it. If you find a way, let me know!

<div class="enhanceable_content accordion">
    <h3><a href="#">Section 1</a></h3>
    <div style="padding: 15px;">
        <p>Section 1 Content</p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div style="padding: 15px;">
        <p>Section 2 Content</p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div style="padding: 15px;">
        <p>Section 3 Content</p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
</div>

Popup Dialog - See this in action here. Just FYI, the popup is defined as only being 300px wide. The class defining this width is ui-dialog. If you figure out how to adjust the width with or without additional Javascript/CSS I'd love to know! I have not tested this on Mobile. I do not know how this will appear to Students using the Canvas App.

<div id="dialog_for_link1" class="enhanceable_content dialog">dialog for link 1</div>
<a href="#dialog_for_link1" id="link1">link 1</a>

Draggable Elements - See this in action here. This works, I don't know when I'd use it, but it is pretty cool.

<div class="enhanceable_content draggable" style="width: 100px;">draggable</div>

Resizable Elements - See this in action here. This adds the lines in the bottom left corner of a <div> tag to adjust the size of an element.

<div class="enhanceable_content resizable" style="width: 100px;">resizable</div>

Sortable Elements - See this in action here. This code allows for the drag and drop resorting of items, like in Modules, or Assignment Groups.

<ul class="enhanceable_content sortable" style="display: none;">
<li>item 1</li>
<li>item 2</li>
</ul>

Just wanted to share with everyone! I figure this is easier to find as a blog post then being buried in a question discussion.

jnickerson1 · ‎03-27-2017

Hi All,

I hate to be a downer, but I would like to warn all of you that Canvas is indeed deprecating the use of jQuery UI "widgets". When I discussed this with them over the phone they said it would not be for a little while yet but it will happen eventually. You can confirm this yourself by loading up the page that you are calling the UI elements on, right-clicking anywhere on the page and opening your web inspector (This may say "inspect element" or some other thing depending on which browser you are using). You will see a big red warning in your console (See the attached screen shot).

When Canvas does deprecate, your tabs and accordions and such will no longer work. Thus, your courses will break.

To get around this, I built my own replacement "widgets". This is done by uploading one's own JavaScript code into Canvas. In order to do this, you will need access to your instance of Canvas as an administrator. If you are part of a large university this might be difficult unless you know the right guy in your IT department. If you have access, I am happy to share the code that I wrote to replace these widgets. Please feel free to PM me if you are interested.

224513_Screen Shot 2017-03-27 at 12.44.38 PM.png

kmeeusen · ‎03-27-2017

Hi laurakgibbs :

Quite awhile back Scott Dennis created us a course on instructure.resources called CanvasHacks Demo Course. I loaded it with content from my own Do Not Fear the Code faculty professional development course. It has since grown through crowd-sourcing and has more than 800 participants. Lots of good stuff in there, including the stuff @jperkins posted above, and lots of good general stuff to help you use the code snippets.

You can self enroll as a student by following this link: https://resources.instructure.com/enroll/8R9H7B

Or, if you prefer to be enrolled as a teacher so that you can also contribute, shoot me your email address via direct messaging, and I will enroll you as a teacher.

I also offer this as a f2f hands-on workshop for faculty; and in fact, am doing so at our state's Canvas Conference this Friday.

KLM

laurakgibbs · ‎03-27-2017

Thank you, @jnickerson1 ‌for that heads-up. I'm pinging @keeganlong-whee ‌ to see if this is worth pursuing as an admin solution on our end. These sure are nice! If you have already been recommending them to OU faculty (?), then it would be good to extend the life if possible. I'm not into this deep, though, so for me it's a nice-to-have but not a must-have at this point.

mathewreed · ‎06-21-2017

This is a great resource, thanks for posting the code!

In regards to the accordion element, is there a way to ensure the first element is closed by default? So all the titles of the accordion items are showing and the first one isn't open by default?

Thanks!

jnickerson1 · ‎06-21-2017

Check out my comment on page 4. You can do this, but it does require a small amount of custom javascript.

cholling · ‎06-23-2017

LOVE LOVE the name Do Not Fear the Code

yaukable · ‎07-05-2017

It looks like the accordion functionality was removed in a recent Canvas update. Any ideas for a workaround, @jperkins ‌? Thanks for the original post - been using it a lot!

jperkins · ‎07-05-2017

I built a fake accordion by utilizing some additional code from the Canvas Styleguide. The code only works as long as you don't edit the page after saving in the HTML editor. You can stack as many of these on top of each other as you'd like. It's not perfect, but it looks alright and works essentially the same as an accordion. Essentially though, it needs to be edited in a text editor outside of Canvas. So not for everyone.

<span
  class="element_toggler"
  aria-controls="group_1"
  aria-expanded="false"
  aria-label="Toggler toggle list visibility"
  role="button"
>
<h3 class="content-box pad-box-mini border border-trbl border-round"> <i class="icon-mini-arrow-down"></i> <strong>Tier 1</strong></h3>
</span>
<div id="group_1" class="content-box" style="display: none;">
<p>Content Area 1</p>
</div>
<span
  class="element_toggler"
  aria-controls="group_2"
  aria-expanded="false"
  aria-label="Toggler toggle list visibility"
  role="button"
>
  <h3 class="content-box pad-box-mini border border-trbl border-round"><i class="icon-mini-arrow-down"></i> <strong>Tier 2</strong></h3>
</span>
<div id="group_2" class="content-box" style="display: none;">
<p>Content Area 2</p>
</div>
<span
  class="element_toggler"
  aria-controls="group_3"
  aria-expanded="false"
  aria-label="Toggler toggle list visibility"
  role="button"
>
  <h3 class="content-box pad-box-mini border border-trbl border-round"><i class="icon-mini-arrow-down"></i> <strong>Tier 3</strong></h3>
</span>
<div id="group_3" class="content-box" style="display: none;">
<p>Content Area 3</p>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Here it is in action:

Fake Accordion: Jeremy's Community Resources

Shar · ‎07-05-2017

I've tried the Toggle Reveal fake accordion solution as well, and at first my team was thrilled...

They noticed that the mini-arrow-down did not automatically change to a mini-arrow-right, so they asked me to change the icon to something that showed collapse-expand. So I used expand-items icon.

Then I showed them that expanding the next tier does not collapse the other tiers. Ok, so the end user has to do extra clicks.

Then I showed them the mobile view of the fake accordion and the content for each tier was not displayed because of the display:none. That was the deal breaker. The previous accordion would just display expanded in mobile. So we ended up removing the enhanceable_content accordion bit and leaving the whole page expanded.

For what it's worth, I wanted to try the widgetize code solution from 6/24 Production notes but our team determined that we only had about 12 courses uses accordion and to just adjust those courses instead of trying to get our campus to add the custom js of our subaccount.

Cheers - Shar

tobe_baeyens · ‎07-19-2017

Wow, looks amazing. I do love the tabs.

DeletedUser · ‎07-31-2017

Hi Jeremy and ishar-uw‌,

If in the future you would like the arrows to rotate on click (in some other usage perhaps), add auto_rotate to the icon class like so:

The code for the element_toggler will then make it alternate between icon-mini-arrow-right and icon-mini-arrow-down on clicks.

jrd · ‎08-08-2017

The "Accordion-drop down expandable menu" is no longer working. I tried it out in various browsers to no avail.

cbarham · ‎08-20-2017

We have been using the Accordion code for quite a while but it is no longer working. Has anyone else run into this problem? Does anyone have a solution?

Our classes are getting ready to start 8/28 and teachers who have created a lot of pages with accordions are starting to worry they are going to have to completely reformat their courses.

Any help you can provide would be greatly appreciated.

Thanks,

Christy

Shar · ‎08-20-2017

Hi cbarham,

You have a couple of options for alternatives to the accordions:

widgetize code solution from 6/24 Production notes
Jeremy's toggle reveal setup as noted in another comment in this blog

I've heard of folks switching to tabs for the accordion content and of course just letting the text expand out anyway since that's how it has always appeared in the mobile apps.

Good luck - Shar