I would like to use the Accordion code on a page in a course.
I've copied the code from the first box and pasted it into the page using the HTML Editor.
There's a second box with some code that I then pasted below that because I wasn't sure what to do with it.
Obviously I'm an amateur and doing something wrong :smileyconfused: because I'm not getting the accordion. Any help is greatly appreciated.
I would also be interested in knowing how you got the styling to work. Another problem with the accordion I have found is that they all accordions in a set open to the same size regardless of the size of the content they hold. Have you worked around that?
Janetta & Matthew
Some of the content in the style Guide will only work on a content page if the Global CSS file is updated with the code snippet in the second box, and then only if that snippet is sequenced in the right location in the global files, and often with more code used to make it load in the correct order.
Matthew: you seem to know the global script well enough to play in there.
Janetta: Several of us have been sharing some HTML content hacks in this group that will work without updating the global script. Check key-word "Code-Snippets" to find these. Also, Scott Dennis has created a public classroom where some of us will be providing much more of these types of enhancements - Coming soon!
Code snippets are in my comfort zone. I get a kick out making those HTML content hacks. I look forward to checking out the course from Scott Dennis!
I'll try to put together a public Canvas page that I can use to go into further detail on how I got things to look the way they do. It'll help everyone see it in action as well.
I hope you like it!
It's brother (that I uploaded from) is being built to train adventurous faculty who also are not coders (also, as in neither am I), so the structure of the lesson pages might seem a bit pedestrian for those of you who code.
Now that its up for all those fancy Instructional Designer Group members, I suspect I'll start seeing that tone change a bit - but I hopenot too much, I still have so much to learn.
I am getting ready to start playing in our Global Script, but only on our test instance so I don't muck things up too badly - I tend to be much braver than I am smart:-}
Since the test environment gets overwritten every three weeks (and I'm too lazy to check the calendar to see when the next refresh is), I just created a separate sub-account in our production environment for testing these changes. Each sub-account can have it's own CSS and JS files if that feature is enabled at the higher level account.
This is such a great line of questions and dialogue!
What I was looking for was something similar to the way bootstrap has been implemented in places like Wordpress environments. These things should just be whitelisted globally!
See this example: http://getbootstrap.com/css/#buttons
When I was previously at UConn, they had their own WP instance called aurora where all of these features were baked in as a plugin(s) and themes. Home | Aurora
Maybe this would help?
<div class="enhanceable_content accordion">
<h3><a href="#">TYPE TITLE TO FIRST ACCORDION TAB</a></h3>
<p>TYPE CONTENT FOR FIRST ACCORDION TAB</p>
<h3><a href="#">TYPE TITLE TO SECOND ACCORDION TAB</a></h3>
<p>TYPE CONTENT FOR SECOND ACCORDION TAB</p>
<h3><a href="#">TYPE TITLE FOR THIRD ACCORDION TAB</a></h3>
<p>TYPE CONTENT FOR THIRD ACCORDION TAB</p>