AnsweredAssumed Answered

Making accordion collapsed by default

Question asked by ysong@salisbury.edu on Jan 13, 2018
Latest reply on Feb 6, 2018 by Kenneth Rogers

I'm trying to create an accordion on a page and make it collapsed by default. My code looks right, but the page displays the accordion as expanded by default. 

This is the code I'm using (copy-pasted from here: Canvas LMS ):

<p><span class="element_toggler" role="button" aria-controls="group_1" aria-label="Toggler toggle list visibility" aria-expanded="false"> <i class="icon-mini-arrow-down"></i> <strong> Academic Integrity</strong> (Click for more information) </span></p>

Anyone knows what's wrong?

 

UPDATE: I think I got it figured out! After going through and comparing the suggestions given in this thread and others, I think I might have found the solution to my own problem =) I noticed that all the other variations of the toggle solution that work have additional style attributes (excuse my deficiency in HTML jargon!) for the hidden information, so I added the same attributes (in blue below) in my own code and it seems to be working now --

<p><span class="element_toggler" role="button" aria-controls="group_1" aria-label="Toggler toggle list visibility" aria-expanded="false"> <i class="icon-mini-arrow-down"></i> <strong> Academic Integrity</strong> (Click for more information) </span></p>

<p id="group_1" class="content-box" style="display: none;">Text to show when expanded goes here.</p>

 

(well really, only the "display: none" part is what's making a difference here.)

 

Updated

Outcomes