[ARCHIVED] Element Toggler

Jump to solution
cmk24
Community Member

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 (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