Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
nschwiet
New 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)
38 Replies
jnassif
New Member

Check out my blog, I have a lot of examples of interactive HTML examples you can include in your canvas page.

https://community.canvaslms.com/groups/designers/blog/2017/05/24/canvas-html-editor-tips-and-code 

tom_gibbons
Community Contributor

I've started using this, and it's great, but one thing that I've noticed is that the toggler buttons aren't accessible through keyboard/tab navigation. Tabbing skips the buttons to the next actuatable thing, like a straight link. Anyone have any ideas on how to make the togglers "visible" to keyboard navigation?

One other thing that I was dinking around with, but that's outside my abilities (apparently even to isolate usable search terms for the process), is to create a button that changes text based on the expanded/hidden state of the content, like "Reveal the Answer" and "Hide the Answer" (although now I'm thinking it might be fun to do a Harry Potter-themed button set: "Revelio!" "Obscuro!").

Shar
Community Champion

Hi  @tom_gibbons ‌,

Ugh! You're right! I cannot tab to my click-to-reveal buttons at all. I feel as though I was able to in the past though. Oh man oh man!

Grrr Smiley Sad

-Shar

Thanks for pointing this out. It would also be interesting to find out if the content is accessible using a screen reader.

Because the code is using ARIA state labels and controls, I believe it should be perceivable for screenreaders. Why the tab nav doesn't work (or didn't a few months ago...haven't checked recently) is a mystery to me. 

I put several of these on a page for a course FAQ for students. When I click on one, they all open. Is there a way to have each one open on its own when clicked?

Sarebre
New Member

Hi all,

Thanks for the tips! Does anyone know how to change the color of the buttons?

Thanks again 🙂

@Sarebre 

The color of the buttons can be changed based on which button style you put into your code. If you scroll down the style guide you will see the different button styles. The colors are based on your Theme branding. Not sure if you can override those colors...I think it will use whatever colors are established for your account or sub-account theme.

https://canvas.instructure.com/styleguide

@rebecca3 

I struggled with this the first time I tried it, as well. However, the toggle buttons and pop-ups are similar in how each one has a unique "ID."  All you have to do is modify your code to show a unique ID for each one:

Example: 

Look in your code before the button text and you should see this: aria-controls="unique label goes here"

Then you will see this after the button text: id="unique label goes here"

Make sure each button has its own unique label. Once I did that, voilà! It worked beautifully.