Showing results for 
Show  only  | Search instead for 
Did you mean: 
New Member

Editing the syllabus page

I'd like to make the syllabus appear as collapsible sections, so that it is more navigable for students - and at the same time can be printed for those who need a copy for elsewhere (such as transfer credit evaluation at another institution).  So far I've discovered that jquery doesn't work and javascript doesn't work.  My question is what html is available so I can research display options.

Maybe a request to Canvas for collapsible sections?

9 Replies
Community Coach
Community Coach

 @parke_4 ​, check out these resources and see if it helps - Canvas LMS HTML Style Guide & Canvas HTML Whitelist.

Thank you for responding Kona !  Accordian works on regular pages, but is not included in the design tool for the Syllabus page and does not work when I copy over html from a different page.

It works so well on regular pages, and we have so many issues with having too much content on our syllabi -- maybe use a regular page for the syllabus (with the accordian feature), hide the syllabus tab, and put in a nav tab that leads to the accordian page? The drawback would be that the assignments would not be listed at the bottom....

I experimented with this and used the Using jQuery without Custom Javascript  for an accordian in the syllabus by putting it into a table - - and it worked. I created the table first, then put the text "middle of table" in it; went into html mode so I could see where to cut and paste the script in.  My results:syllabus_accordian.png

Thanks,  @efalconer ​, for taking the time to devise this nifty design solution!  @parke_4 ​, will the solution Elizabeth just posted work for your purposes, and if it does, would you click the "Mark Correct" button that appears above her response? Or have you "messed around" (Smiley Wink) some more with HTML and inline CSS, as  @jamely ​ suggested, and if so, would you take a moment to share your solution here?

I've found something that will toggle - and works on the Syllabus page.  However it defaults to showing the text.  I'd like the default to have the text hidden.

<h3><span class="element_toggler" role="button" aria-controls="group_1" aria-label="Section1 toggle div visibility" aria-expanded="true"> Instructional Staff </span></h3>

<div id="group_1">

<p>My Text</p>


Community Coach
Community Coach

This is beyond my area of expertise, so I'm going to share this with the Instructional Designers​ group in the Community to see if they can assist with this!

The revised div code below seems to work and load the content without the div content being visible:

<div id="group_1" style="display: none;">

Community Champion

 @parke_4  It looks like you are willing to mess with some HTML and inline CSS, and if so, I think you will find this thread to be a bit mind blowing 😜 Using jQuery without Custom Javascript has all the tricks that will make you look like a Canvas superhero! As for print-ability, just offer a PDF file link as well. Have fun with it 😜