Can I add a Expand all and collapse all accordion in canvas without using CidiLabs?

[RahulBagga]

Hi Team,

I want to add expand all & collapse all accordion template in canvas without using Cidi Labs. Is there any way around for that. If yes, Please help me out.

[Beehive]

Good Morning,

Thanks for reaching out in the community! I recommend using HTML5 tags for this purpose, and I specifically recommend using the details and summary tags. It's supported in Canvas, and it's much simpler code than conventional accordion code. Additionally, since it's HTML5 and semantic HTML, this also has accessibility benefits.

Let me know if you have more questions on this.

Thank you!

Nathan

[RahulBagga]

Thanks for you Help @Beehive.

But I want something like below screen grab where I can toggle between button without using Javascript/Jquery Code

[Chris_Hofer · Accepted solution]

Hi @RahulBagga ...

I thought I'd provide another example for you that might work for your needs.  You can find an entire writeup from Sean here:

Accordion menus in Canvas - Instructure Community - 547080 (canvaslms.com)

There's also some older examples, but there is no guarantee that it will work long-term:

• Using jQuery without Custom Javascript - Instructure Community - 270897 (canvaslms.com)
• Solved: Deprecated use of magic jQueryUI widget - Instructure Community - 112218 (canvaslms.com)

I hope these resources will help a bit.

[RahulBagga]

Thanks for you Help @Chris_Hofer .

But I want something like below screen grab where I can toggle between button without using Javascript/Jquery Code

[paul_fynn]

Should be straightforwards in html

<details><summary>Put your title here - limited formatting only no media or other content</summary>

<hr/>

Repeat Title here for accessibility purposes - any formatting permitted

Add any RCE content, media, formatting etc.

</details>

[RahulBagga]

Thanks for you help @paul_fynn .

But I want something like below screen grab where I can toggle between button without using Javascript/Jquery Code

[paul_fynn]

Sigh.... sometimes the community helps those most who help themselves most .....

Try this (not sure about the collapse all toggle)

<details style="color: #ffd100;">
<summary style="background-color: #1c2165;"><span style="text-decoration: underline;"><span style="font-size: 18pt;"><strong><span style="color: #ffd100; text-decoration: underline;">Course Welcome - Course Leader - (Name)</span></strong></span></span></summary>
<span style="color: #000000;"><span style="font-size: 14pt;">. You are enrolled on this course to gain professional and academic recognition for the career you plan to undertake in the near future. This course is a challenging and demanding one but with dedication to your studies, you will find it rewarding and enjoyable. The course is designed with your professional and personal development at the core of the course. We are here to support your development and guide you to achieving your dream.</span>&nbsp;</span></details>
<table style="border-collapse: collapse; width: 100%; height: 100%;">
<tbody>
<tr>
<th style="width: 99.7618%; vertical-align: top; text-align: left;" scope="col"><details>
<summary style="background-color: #ffd100;"><span style="font-size: 14pt; color: #236fa1;"><strong><strong>Your Award&nbsp; - How your course is structured</strong></strong></span></summary>
<details>
<summary style="padding-left: 40px;"><span style="color: #236fa1;"> <strong> <span style="font-size: 14pt;">Modules, Module outcomes &amp; assessment</span> </strong> </span></summary>
<p>content here</p>
</details><details>
<summary style="padding-left: 40px;"><span style="color: #236fa1;"><strong><span style="font-size: 14pt;">The Course Standards</span></strong></span></summary>
<p>content here</p>
</details><details>
<summary style="padding-left: 40px;"><span style="color: #236fa1; font-size: 14pt;"><strong>Course Learning Outcomes</strong></span></summary>
content here
<summary style="padding-left: 40px;"><span style="color: #236fa1; font-size: 14pt;"><strong>Progression</strong></span></summary>
<p>content here</p>
</details><details>
<summary style="padding-left: 40px;"><span style="color: #236fa1;"><strong> <span style="font-size: 14pt;">Representation, Feedback and Evaluation</span> </strong></span></summary>
<p>content here</p>
</details></details></th>
</tr>
<tr style="height: 10px;">
<td style="width: 99.7618%; height: 20%; vertical-align: top;"><details>
<summary style="background-color: #ffd100;"><span style="font-size: 14pt; color: #236fa1;"><strong> Course Essentials </strong></span></summary>
<details>
<summary style="padding-left: 40px;"><span style="font-size: 14pt; color: #236fa1;"><strong> Course Teaching and Admin team&nbsp; </strong></span></summary>
<p>content here</p>
</details></details></td>
</tr>
</tbody>
</table>
<hr />