I am building out a new content page, and was using the style guide's example code for the mini-accordion, but it just displays the sections as links with content listed below (see image). Here is what I pulled from the style guides:
Section 1
Content for Section 1
Section 2
Content for Section 2
Section 3
Content for Section 3
I don't know of the longevity of the styles as I've seen messages on the community that Instructure is moving away from jQueryUI.
Nevertheless, on Canvas Commons some code was shared for an accordion UI widget. I've confirmed that this code still works:
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>enhanceable_content accordion<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>PUT TITLE FOR TAB HERE<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>h3</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Content 1<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>h3</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. <BR />Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, <BR />nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. <BR />Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>PUT TITLE FOR TAB HERE<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>h3</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Content 2<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>h3</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. <BR />Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum <BR />sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. <BR />Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>PUT TITLE FOR TAB HERE<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>h3</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Content 3<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>h3</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. <BR />Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. <BR />Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. <BR />Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>p</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
This renders as follows:
Hello, I'm building a standalone app that integrate with CanvasI) - What are the requirements (and cost if any) for receiving an API developer key issued by Instructure? - Are Instructure-issued keys enabled globally in all Canvas organizations? or will there need to be institution-by-institution enablement? Thanks
Hi everyone, I am seeking some insight into how Canvas LMS handles HTTP errors and how they are reflected in the logs versus the user interface. We are currently observing the following behavior in our environment: Log-only errors: We are seeing 500 (Internal Server Error) and 503 (Service Unavailable) errors recorded in…
I'm currently integrating an LTI tool and attempting to use the Activity.id.history https://canvas.instructure.com/doc/api/file.tools_variable_substitutions.html#activity-id-history variable, but I'm experiencing issues getting it to work properly. What I've Done: Added the Activity.id.history variable to my Developer…
I looked through the LTI Variable Substitutions documentation and while there are variable substitutions available for Canvas.term.name and Canvas.term.id (which is the Canvas incremented ID like "104"), I was surprised to see there was no option for Canvas.term.sisSourceId I tried testing other possible variants that may…
Summary:The Learning Mastery Gradebook allows drag-and-drop reordering of outcome columns, and this triggers a call to /api/v1/courses/:course_id/assign_outcome_order. The API returns 204 No Content (success), but the column order does not persist after page refresh. Steps to Reproduce: Open Learning Mastery Gradebook for…
