cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Surveyor II

Making accordion collapsed by default

Jump to solution

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

Tags (2)
13 Replies
Highlighted

@Shar thank you SO much. Exactly what I needed to solve the mobile issue, and SO easy!

Tags (3)
Highlighted
Surveyor II

By the way, I have updated my original post :smileygrin:

View solution in original post

Highlighted

ysong@salisbury.edu  - I circled back to see if I could find anything to help me out...and this is great! This is truly helpful!

Highlighted
Learner

Clever! Only problem I see is if you have several of them on one page, they'll all open when you click one of them. You can solve this by renaming the groups in any additional togglers:

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

<p><span class="element_toggler" role="button" aria-controls="group_2" 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_2" class="content-box" style="display: none;">Text to show when expanded goes here.</p>

Anyways, really nice solution. I'll make the instructors here aware of this solution as well. Thanks! 🙂