cancel
Showing results for 
Search instead for 
Did you mean: 
nschwiet
Community Member

HTML Button toggle content

I am trying to make some interactive content in a page. Ideally, there would be a button that upon being pressed would yield some further information sort of analogous to the javascript alert method, except without the popup box and javascript. Instead, the content would appear within the content page.

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?

Tags (3)
36 Replies
eliams
Community Member

Ditto! Thanks Ethan! Great solution. The mobile part is still an issue, but for most courses, this is a great solution.

Thanks,

Sheryl

Wonderful. Thank you. I was looking for something similar and it works beautifully.

awebster
Community Member

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><strong>Video Transcript</strong></h4>

<p>blah blah</p>

</div>

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

<h4><strong>Video Transcript</strong></h4>

<p>blah blah</p>

</div>

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

Ethan,

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:

Answers hidden:

answers hidden.png

After clicking Show Answer button just for Q1:

displayed answers.png

As you can see the button revealed all answers rather than just the first question as I was hoping.

Appreciate any help!

nealc62
Community Member

Hi Nick,

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:

128901_pastedImage_0.png

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.

Cheers,

Jan

stefaniesanders​, yes, for whatever reason, the Rich Content Editor View doesn't load or apply CSS either, which makes it behave similarly to the mobile app. I do most of my editing either in HTML view, or in an external editor like Dreamweaver, and then paste back into Canvas. Canvas is (fortunately) fairly smart about auto-modifying URLs during rollovers. But I also know a little trick that helps, too.

You might notice that many of your individual page URLs look something like this (not a real URL):

https://canvas.harvard.edu/courses/12345/pages/introduction-to-this-course

If you have tried to link to a page like this by copying and pasting the URL, you know that your link will break if you change the name of that page. You might also notice that even if that page is in a module, you might not see the "Next" and "Previous" buttons at the bottom of the page, because you linked directly to the standalone page, not the page as a module item. However, if you're using Modules, you can harvest a link to that page if you (1) go to your Modules page (2) find the page you want to link to, and then (3) left-click on the link to that page and choose "copy link location" or whatever equivalent your browser uses. If you do that, you get something that looks like this:

https://canvas.harvard.edu/courses/12345/modules/items/105458

This is a link to that same page, as it is situated within the module. This also works for quizzes, assignments, etc.... anything that can be an item in a module. This link will not change even if you change the page title or even if you move it around within the module (though it will break if you move the page to a different module). It also helps Canvas convert the page during a rollover. If you paste that link into Canvas HTML viewer, you'll see that after you save the page, Canvas will automatically truncate the link to

"/courses/12345/modules/items/105458"

...storing it relative to your Canvas instance's domain. When you copy a course over, Canvas audits and adjusts these URLs for the new course. So when you import this page to a new course, it may be converted to something like

"/courses/54321/modules/items/20986​"

... but the page it links to will be the correct page in your new course!

Two big caveats to this process:

1) This mass conversion of pages and links only works if you do a single import of everything that cross-links into the new course, all at once. If you import the linking-out page today and the linked-to page tomorrow, that link won't work anymore in the new course.

2) If you use any LTI tools or plugins, they don't necessarily roll over. In fact, I had a problem with one LTI tool linking back to the old course, and I didn't realize it until students tried to follow it and got an error message.

Hope this is helpful!

I love this, 60980756​!

I pasted your code into a test page, and notice that in the Rich Content Editor view, I don't see a preview, so I am doing all of my editing in the HTML Editor view. With that in mind, I have a question about the part of the code where you have a # placeholder for the href=. How would you insert a relative link in there, say to a quiz, so that the link doesn't break upon course copy? In other words, I'd like to be able to use the Insert Content into the Page panel to insert the quiz link instead of pasting the direct URL to the quiz. When I tried that just by brute force (clicking on the # and using the Insert Content panel), it broke the buttons. Do you have a quick way of inserting the relative links without having to go back and clean up the HTML?

Hey Ethan,

This is exactly what I was looking for! For some reason aria-expanded="false" wasn't hiding my content by default in my HTML, but copying yours this works great. This is an elegant solution.

Thanks!

Nick