cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
nschwiet
Community Participant

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
nealc62
Community Participant

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

isaac_piercy
Community Participant

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!

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

anna_selway
Community Participant

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

awebster
Community Contributor

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>

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

eliams
Community Contributor

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

Thanks,

Sheryl

Shar
Community Champion

Thank-you, thank-you 60980756​! Your example helped me in two ways:

  • Getting the toggler to work on desktop
  • Hidding the toggler menu on phone-size

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

Shar
Community Champion

Yes awilliams​,

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

mtuten
Community Contributor

Sorry if this answer comes too late, but you have to change the value for aria-controls= and <div id= for each toggle instance.

<p><span class="element_toggler" role="button" aria-controls="group_2" aria-label="Toggler toggle list visibility" aria-expanded="false"> <a class="icon-info"> More Instructions on Responding</a> </span></p>

<div id="group_2" class="content-box" style="display: none;">

<p>Hidden Content</p>

</div>

<p><span class="element_toggler" role="button" aria-controls="group_3" aria-label="Toggler toggle list visibility" aria-expanded="false"> <a class="icon-info"> More Instructions on Responding</a> </span></p>

<div id="group_3" class="content-box" style="display: none;">

<p>Hidden Content</p>

</div>