cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
cmk24
Community Member

Element Toggler

Jump to solution

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.

Labels (2)
Tags (1)
1 Solution
james_trueman
Community Contributor

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>

View solution in original post

12 Replies
james_trueman
Community Contributor

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
Community Member

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?

0 Kudos
james_trueman
Community Contributor

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>

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

james_trueman
Community Contributor

No worries  

0 Kudos

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

0 Kudos

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

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.

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.

0 Kudos
rseilham
Community Coach
Community Coach

 @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
New Member

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.

0 Kudos
james_trueman
Community Contributor

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

0 Kudos