cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
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

11 Replies
Highlighted
Community Member

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

Highlighted
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?

0 Kudos

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

Highlighted

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

Highlighted

No worries  

0 Kudos
Highlighted
Community Coach
Community Coach

james.trueman@anglia.ac.uk‌, 

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. 

Highlighted

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
Highlighted

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@usu.edu‌ a line.  He showed some great CSS use in the apps with this type of use case.

Best Wishes

Highlighted

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.

Top Kudoed Authors