[ARCHIVED] Element Toggler

[cmk24]

I used the element toggler to in our knowledge checks within our courses.  They are convenient  to use.  I noticed that they don't work within the app.  Is there a plan to get the element toggler to work within the app?  I don't know what to do at this point.

[james_trueman]

We coded it so that the element toggler was always open in mobile - but dynamic in desktop. It may not be what you're after but happy to share.

Some CSS and javascript was referenced in this post to make features work in mobile - not sure if you want to go down that road?

BW

[cmk24]

I am putting in this code into Canvas.  The content would be hidden until you click the button. I would love to be able to have the content show in mobile.

<p><span class="element_toggler btn btn-primary" role="button" aria-controls="group2" aria-label="Toggler toggle list visibility" aria-expanded="false">Video transcript.</span></p>
<div id="group2" style="display: none;">
<p><strong>Video Transcript</strong></p>
<p>blah blah</p>
</div>

Any ideas?

[james_trueman · Accepted solution]

Below is some script that illustrates what we used to make the Toggler mobile friendly.  As you found, without something like this the Toggler is flat and unresponsive in the mobile app – so the Toggler Content is not visible.  This script ensures that the Toggler works responsively in the desktop environment – but automatically opens each Toggler field in the app to allow the content to be viewed.

Canvas does not allow <--- !> HTML comments, I've included them to provide instructions. Please remove them before implementation.

<--- Toggler 1starts here------------!>

<p>
       <span class="element_toggler" role="button" 
                       aria-controls="Desktop_Content_1" aria- label="Toggler toggle list visibility" aria-expanded="False">
                   <strong><i class="icon-mini-arrow-down"></i>Toggler 1 </strong></span>
</p>
<div id="Desktop_Content_1" style="display: none;">
         Content 1 for desktop goes here
</div>
<div class="hidden-desktop hidden-phone hidden-tablet no-print">
         Content 1 for mobile goes here
</div>

<--- Toggler 2 starts here------------!>

<p>
     <span class="element_toggler" role="button" 
                aria-controls="Desktop_Content_2" aria-label="Toggler toggle list visibility" aria-expanded="False"> 
     <strong><i class="icon-mini-arrow-down"></i>Toggler 2 </strong>

      </span>

</p>
<div id="Desktop_Content_2" style="display: none;">
         Content 2 for desktop goes here
</div>
<div class="hidden-desktop hidden-phone hidden-tablet no-print">
         Content 2 for mobile goes here
</div>

[cmk24]

Thank you so much.  It worked wonders.  I'm so happy now.

[james_trueman]

No worries  

[Landmark_Coll]

Hi James,

I've adopted your technique and it works nicely. I'm wondering if you might have any CSS enhancements that would animate the transition between hidden and visible. This is a frequent feature of togglers/accordions which makes their use a little less jarring. I've tried playing around a bit without any success.

Thanks in advance.

MK

[james_trueman]

Hi Michael

We've not implemented any additional CSS (I have to admit my coding skills dry up a bit there). I'd highly recommend dropping  @kenneth_larsen ‌ a line.  He showed some great CSS use in the apps with this type of use case.

Best Wishes

[kenneth_larsen]

Sorry, I did some digging into this but then neglected to report back. With the way that the Toggler code works, it just removes the style="display:none;" from the content which means there isn't really anything of which I am aware that you can do with CSS to animate that transition.

In order to have something that is animated, you would need to write your own JavaScript and build your own toggle switch. With the lack of jQuery in the mobile app, this may be a much deeper rabbit hole than you want to go down.

[Landmark_Coll]

Hi Kenneth,

Thanks for the follow up. While I don't mind monkeying with Javascript, since this is mostly an aesthetic fix it's going to have to wait a while. I appreciate your research on it.

[rseilham]

 @james_trueman ‌, 

Thanks for sharing your knowledge with the element toggler! I know it can be frustrating at times to get this to work with the Canvas apps, but it's nice to see that people like you are sharing great workarounds. 

[forgard]

Thanks for posing this James. It has helped me create course materials that are a little more interesting than Canvas vanilla, having to purchase something from a vendor, or go into the CSS (verboten by my IT office).

After some investigating, I found that this renders the page not accessible for tabbed browsing. A user cannot tab through the menu items. When testing this, tabbing skips from the three dots menu to the last tabbed item then the page's Back button.

Has anyone else had this issue using this code?

My workaround is the create a parallel accessible page in vanilla Canvas. Its not pretty, but accessible for those who need it.

[james_trueman]

Hey @forgard - apologies for the huge delay in replying. I've not come across that, thanks for pointing it out. I'll mention it this end and see if we can think of anything - did you come up with any other solutions?

BW