cancel
Showing results for 
Search instead for 
Did you mean: 
cmk24
Surveyor

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

Accepted Solutions

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
Learner II

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
Surveyor

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?

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

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

No worries  

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. 

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

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.