ARCHIVED: Adding enhanced interface components in Canvas content

This content has been archived, and is no longer maintained by Indiana University. Information here may no longer be accurate, and links may no longer be available or reliable.

Using the HTML view of the "Edit" screen, you can add enhanced user interface components, such as accordions, tab sets, and pop-up dialogs, to Canvas content without the need for additional JavaScript.

Notes:
  • The techniques described here were taken from the blog post Using jQuery without Custom Javascript in the Canvas Community's Instructional Designers group. See the blog post for more information, demos, and discussion.
  • The strategies described below are provided by the Canvas system, but are not officially supported nor included in the regular maintenance/release cycle. Therefore, they are subject to breaking changes as new versions of Canvas are released. UITS does not anticipate that these components will be removed from Canvas, but strongly encourages content authors to consider how the HTML will be rendered in the event that the dynamic behavior becomes unavailable. To test this, remove the enhanceable_content class from the root element, as seen below.
  • These techniques may not display properly on mobile devices; if you expect course members to use mobile devices with your content, you'll need to test how the elements appear.
  • The techniques described in this article assume a basic understanding of HTML.

Adding enhanced components

Canvas enables the following enhanced user interface components via an HTML class attribute called enhanceable_content. You can add them to Canvas Page, Assignment, or Syllabus content by switching from the Rich Content Editor to the HTML Editor when editing, and then pasting in and modifying the following code snippets. Note that the components may not render in their final form when previewed in the Rich Content Editor, but will render properly when saved and viewed normally. Available components include:

Tabs

<div class="enhanceable_content tabs">          

  <!-- An unordered list containing the tab links -->     
  <ul>         
    <li><a href="#tab-1"><span>One</span></a></li>         
    <li><a href="#tab-2"><span>Two</span></a></li>         
    <li><a href="#tab-3"><span>Three</span></a></li>     
  </ul>      

  <!-- A div to hold the content for each tab. Note that the id
  attribute of each div matches the href attribute of its associated
  tab above.  --> 
  <div id="tab-1">

    <p>First tab is active by default: This is Tab 1 Content.</p>

  </div> 

  <div id="tab-2"> 

    <p>Tab 2 Content: Remember to use appropriate semantic markup 
    in the content divs, including headings, paragraphs, lists, etc. </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="tab-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.<p>

  </div>

</div> 

Accordions

<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> 

Pop-up dialogs

<div id="popup-content" class="enhanceable_content dialog">
  Pop-up content. Can contain as much content as desired, but will be 300px wide.
</div>
<a href="#popup-content" id="link1">
  Pop-up link (note that href matches the id of the pop-up content div)
</a>

Draggable elements

<div class="enhanceable_content draggable" style="width: 100px;">I'm Draggable</div>

Resizable elements

<div class="enhanceable_content resizable" style="width: 100px;">I'm Resizable</div> 

Drag-sortable lists

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

Related documents

This is document bfyb in the Knowledge Base.
Last modified on 2018-01-18 17:42:15.