The closest I have come to this functionality is by using the element toggler found on the styleguide. However this solution has two issues: first, the toggle is by default on, eliminating the need for interaction; and second, the text for the toggle is not clearly clickable (it does not have the appearance of a button).
Does anyone have any suggestions or examples of this in a Canvas content page?
This is this markup for interactive buttons to jump to the Start Here module in a course:
<h3 class="btn" style="text-align: center;" role="button"><strong><a title="0. Start Here (Day 1)" href="https://community.canvaslms.com/courses/11876/modules/2909" data-api-endpoint="https://erau.instructure.com/api/v1/courses/11876/modules/2909" data-api-returntype="Module">Start Here</a></strong></h3>
It looks like this:
I use the same type of interactive button for navigation links inside a content page that point to some other page, assignment, or module.
Let me know if you need to see the steps to add the link to the button.
Could you tweak this somehow to have multiple toggle buttons working independently on the same page? For example, I'd like to use this to add a "Show Answer" button after every math problem in a set of 10 questions. Clicking on the Show Answer button for Question 1 should only reveal the hidden answer for Question 1. However, I tried this with the code above and the result was that clicking on any one of buttons displays all of the hidden text across the entire page. See below:
After clicking Show Answer button just for Q1:
As you can see the button revealed all answers rather than just the first question as I was hoping.
Appreciate any help!
I'm not sure if this is exactly what you are wanting, but it might help... Practice problems that allow students to click on answers to see if they are correct and see soluti... & html code from John Byrd to make it work Re: CanvasHacks Classroom
Hello thank you for the code - I have implemented it on a page and it works great, the only issue I have is that as I have used the code several times on the same page, when I click on one link to reveal the hidden content - the hidden content from the other instances of the code is also displayed.
I just wondered if there was a quick fix for this.
Thanks a lot
I needed the same thing you asked for above. This code is based on @JeremyPerkins, but I was able to keep the toggle button.
Hope this helps!
<h4><span class="element_toggler btn btn-primary" role="button" aria-controls="group_2" aria-label="Toggler toggle list visibility" aria-expanded="false"> Click here for the video transcript.</span></h4>
<div id="group_2" class="content-box" style="display: none;">
<h4><span class="element_toggler btn btn-primary" role="button" aria-controls="group_3" aria-label="Toggler toggle list visibility" aria-expanded="false"> Click here for the video transcript.</span></h4>
<div id="group_3" class="content-box" style="display: none;">
Ditto! Thanks Ethan! Great solution. The mobile part is still an issue, but for most courses, this is a great solution.
Thank-you, thank-you 60980756! Your example helped me in two ways:
Wait, another thank-you for the link to the table of CSS classes defining the screen-size. Now I'm spiffy and can put in cautionary text for mobile users that desktop will not see and vice-versa. I have also created a simplified course homepage for the mobile viewers to get there where they need to go without all the glamour of the desktop/tablet view.
So very awesome!
Cheers - Shar
Your very basic example is precisely what I need to show my coworkers lest they be afraid to put in screen-specific text. Wonderful, simple, and fancy all at the same time!
Cheers - Shar
Sorry if this answer comes too late, but you have to change the value for aria-controls= and <div id= for each toggle instance.