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)
1 Solution

Accepted Solutions
Highlighted
Surveyor II

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

View solution in original post

12 Replies
Highlighted
Community Coach
Community Coach

Hello ysong@salisbury.edu...

You might want to take a look at the following two discussion topics...as they appear to be similar in nature.  I'm not much of a coder, so I don't know if you'll be able to get them to work, but I do know that some things are no longer supported:

Have accordions stopped working? 

https://community.canvaslms.com/message/76345-where-have-all-the-accordions-gone 

I hope this helps.

Highlighted

I'm not much of a coder either 😃 Yes, I did read those threads a while ago, and they somehow led to the method I was asking about here, which I hoped would be a close enough substitute.

Highlighted
Instructure
Instructure

Hi there ysong@salisbury.edu,

I recently had the same question (Help with Element Toggler and aria-expanded Settings ) and was told that there needed to be separate CSS to make it collapse by default. Also, it was pointed out that with Instructure deprecating the use of jQuery widgets, it may not be the best plan to use some items. I was referred to Using jQuery without Custom Javascript to read the conversation.

I haven't had a chance to see if I can hack my way around this in the meantime - so if you get a chance to, I'd love to hear!

Highlighted

Thanks for the link! I wish the two replies to your question had been more informative, but I'll dig around to see if I can find something.

Meanwhile, I'm resorting to some sort of "anchoring"/linking within the same page to give structure to a page with lots of text. From HTML Links -- 

HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example
First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

<a href="#C4">Jump to Chapter 4</a>

Highlighted
Community Member

I would think you could do that with anchor tags- that is generally how you would do it on the web. So this would be the link<a href= "#link"></a> and then place this where you want to link to: <div id =#link></div>(empty div- not the best semantics but fine)

0 Kudos
Highlighted
Learner

Hello Y S,

I definitely wouldn't use that code - it seems buggy and even if you achieved the result you wanted it's a poor solution. But, if you want something like a Fact-box that you can expand and collapse, you're welcome to use this HTML - just copy the whole thing into the HTML editor and see for yourself:

<p class="text-center" style="text-align: left;"><span class="element_toggler btn" title="FactBox" role="button" aria-controls="box1" aria-label="Toggler for FactBox1" aria-expanded="false"><i class="icon-question"></i>Text toggle</span></p>
<div id="box1" class="border-round" style="border: thin solid #be1941; display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec mollis est. Maecenas venenatis, eros at iaculis congue, lectus felis rhoncus quam, quis ultricies nunc felis sit amet massa. Ut fermentum viverra dui nec bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla at metus tortor. Sed efficitur ex vitae leo fermentum commodo. Cras at quam quam. Etiam mollis sem quis volutpat malesuada. Fusce consequat nisl in dapibus laoreet. Sed vestibulum mi purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean quis placerat lacus. Vivamus neque turpis, rhoncus at elementum id, congue quis diam.</div>

It's functional and will create a little red button with a question mark on it. When you click it, it expands a square of text instantly. It can be collapsed by clicking the button again. The color of the button can be restyled, but it has to be done through custom CSS. The width of the expanded area can also be tweaked and many other things that may require a bit more skill/learning-by-doing, but it's pretty easy if you stick to color and expansion width and you're welcome to borrow this code if you want to restyle it: 

.element_toggler btn{
color:white;
background:#be1941; /* insert HEX-code of desired color here */
hover:none;
border:none;

}

.element_toggler{
background: #BE1941; /* insert HEX-code of desired color here */
color: white;
transition:none;
hover:none;
border:none;
}

.element_toggler:hover{
background:#e55a72;
color:white;
border:none;
}

/*expand-box*/
.border-round{
width:100%; /* set width of expanded box here, either % or px (pixel). 100% achieves the best and most scalable results in my opinion.*/
}

Don't worry about uploading custom CSS with these parameters - it only affects the fact-button in question. If you're new to uploading custom CSS, it's a good idea to have a test-course to run this in before you upload it to a course with real students. Hope that helps. 🙂

Highlighted

Hi Michael,

Thank you! I just tried out your code -- it's beautiful! (I don't really understand the part about the CSS code though; but it looks like the HTML code is all I need right now.) I suppose the question mark in the button is built into the element? Is there any way to remove it or add a space between it and the text in the button?

Also, for those who are interested in this topic, I came upon an earlier post by Michael, Scaling an iFrame dynamically where I found another solution (similar idea, but slightly different look) brought up by Sharmaine Regisford:

Here's another variation of the toggle reveal code:

<p><span class="element_toggler" role="button" aria-controls="group_2" aria-label="Toggler toggle list visibility" aria-expanded="false"> <a class="icon-info"> More Instructions on Responding</a> </span></p>

<div id="group_2" class="content-box" style="display: none;">

<p>Hidden Content</p>

</div>

Highlighted

You're welcome. 🙂 Yes, Sharmaine is also the one who helped me with this initially after my own concept failed to integrate into the Canvas HTML editor. The question mark is built-in, but you can add space by adding 2 or more spaces here: 

<p class="text-center" style="text-align: left;"><span class="element_toggler btn" title="FactBox" role="button" aria-controls="box1" aria-label="Toggler for FactBox1" aria-expanded="false"><i class="icon-question"></i>  Text toggle</span></p>
<div id="box1" class="border-round" style="border: thin solid #be1941; display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec mollis est. Maecenas venenatis, eros at iaculis congue, lectus felis rhoncus quam, quis ultricies nunc felis sit amet massa. Ut fermentum viverra dui nec bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla at metus tortor. Sed efficitur ex vitae leo fermentum commodo. Cras at quam quam. Etiam mollis sem quis volutpat malesuada. Fusce consequat nisl in dapibus laoreet. Sed vestibulum mi purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean quis placerat lacus. Vivamus neque turpis, rhoncus at elementum id, congue quis diam.</div>

I just put spaces in front of the "  Text toggle" text of the button. "Text toggle" can be changed to whatever you like or removed, it's just the text on top of the button. So for example, we'd set the text to "Nouns" and then you can fold it out to see what a noun is if you forgot, but it won't clutter the assignment description with information you probably won't need.

Regarding the CSS, it's quite easy but definitely harder than the HTML copy and paste. You just need a .css file - basically, you could make a notepad file and just rename it to myCSS.css. Then open it in notepad, copy the CSS code I posted in the previous post into it and change the hex-codes (#BE1941 to something else, see here for example Color Hex Color Codes). Save the file, then (on Canvas) go to the account/sub-account you're using and go to the theme editor and upload the file.

More information here: How do I upload custom JavaScript and CSS files to an account or sub-account? 

Best way to learn this safe for taking a course in web programming is to just experiment and Google what every little thing means.

Highlighted

Hi ysong and michael5,

I hope you both made it over to the new community. Because I've got some awesome news about another alternative to the accordion. I've been using the toggle reveal trick with a special message for the mobile user since they cannot click and cannot reveal. I figure the message in mobile is also a good reminder they should really be doing assignments from a legit computer.

Today, a friend of mine told me about the HTML Details Element. It's like a single accordion, keyboard friendly, and even better it also works in mobile!

Details expandedDetails expandedDetails collapsedDetails collapsed

Pardon the stray character in the expanded view, I was typing quickly to see if it worked. I'm excited about this html5 tag!

Cheers - Shar

Top Kudoed Authors
Labels