I thought it was time to start a new thread for this.
I was wondering about the conflicts with the html editor--I noticed that in 1.6, Tinymce has been added--although I don't see how to implement it--but I thought that perhaps the coding for Tinymce was different enough that it would not cause the error windows with the accordion format. Do you know anything about this?
Thanks
Great, Accordion got it's own thread
When I understood Janne's posting right it is not sure that TinyMCE will be part of Moodle 1.6, so I did not try TinyMCE yet.
With Accordion version 0.3 the conflict with the HTMLeditor will not occur because the JavaScripts are only loaded on course pages. And taking care on data transfer this is anyway the better solution.
How does Accordion work for you. Do you have an URL with an example we could look at. I am very curious how others build course with Accordion.
Urs
I've tried the latest version for 1.6 and I am still getting the errors. Could you tell me where the code is for the fix so I can check it? Do I have to update other course files too?
I'll send you a link when I get this course finished.
<table class="stretchdtab"> <tbody>
<a name="1"> 1 </a></td>
I've always used this:
#course-view .section .left {
color: #fff;
}
But with accordion, in FF, the topic # only shows up on mouseover, and in IE, there is a strange outline of the number that shows up all the time.
Chardelle,
to hide the number I use
#course-view .section .left a {
display:none
}
Please see also the Acoordion theme.
Urs
Chardelle,
do you use the following line in your "header.html" to include the Accordion files?
<?php if (strpos($bodytags, 'id="course-view"') !== false) include('acco/accordion.php'); ?>
This way Accordion is loaded on course pages only and can't conflict with the HTMLeditor.
I hope this helps
Urs
PS. I just uploaded Accordion Version 0.4 to the Accordion course on the Chameleon site. I added the version number to the archive file for better orientation. The table class is now called "stretchedtab" in well written English and not an English like abbreviation. If you used the class in your CSS please update the name. The example header.html contains also the top anchor as you proposed.
<?php echo $meta ?>
<meta name="keywords" content="moodle, <?php echo $title ?> " />
<title><?php echo $title ?></title>
<?php $theme = "$CFG->wwwroot/theme/$CFG->theme"; ?>
<link rel="shortcut icon" href="<?php echo $theme ?>/favicon.ico" />
<link rel="stylesheet" type="text/css" media="print" href="<?php echo $theme ?>/print.css" />
<?php include("$CFG->javascript"); ?>
<?php if (strpos($bodytags, 'id="course-view"') !== false) include('acco/accordion.php'); ?>
Thanks for the update and bug fixes. I have upgraded to 0.4 but can still generate the JavaScript errors when configuring the HTML block:
/course/view.php?id=73&instanceid=684&sesskey=tFQEa1n2hE&blockaction=config
Hasn't appeared anywhere else.
Yours
James
James, surprisingly the HTML sideblock edit page has got the ID "course-view". It is no course view page.
The decision to load Accordion is based on the page ID. From my understanding of the task and naming of page IDs this one is not optimal. I will check with Martin why this page has got this ID and if he can change it.
Urs
Thanks to Nathanael's patch for the HTMLeditor it doesn't produce errors any more in connection with the prototype library.
Because the patch is not widely tested I added it to Moodle 1.6 Beta 5 from today as the first step. If you have the chance please test Accordion with Moodle 1.6.
When the patch works I will add it to Moodle 1.5.x too.
Good luck
Urs
I haven't generated any errors yet with the Accordion format on Moodle 1.6 Beta 5. I'll keep playing with it and let you know but fingers crossed everything is going smoothly.
Yours
James
On our Moodle 1.6 Beta installation the following had to be changed from the 1.5 theme:
.course .section .content .summary
became
.course .section .summary
Not sure if this is just something on our installation or a general difference between the two versions. This is the only line we use to implement the Accordion theme, but there are other instances where .content appears.
Yours
James
Thank you very much for your feedback James.
Urs
I am getting a bunch of errors even with the patch in 1.5 when placing an html block in place. All other uses of the html editor produces no errors.
These show twice in a row
1. ERROR [createSelect]:
Can't find the requested dropdown definition
2. FIXME: Unknown toolbar item: [object Object]
3. ERROR [createSelect]:
Can't find the requested dropdown definition
4. FIXME: Unknown toolbar item: [object Object]
Then the html editor shows fine and no errors when editing or saving changes.
Thanks,
Deon
Deon, I also noticed that Moodle 1.5.3 needs Nathanael's Moodle 1.6 patch too. He attached the htmlarea.php file to this posting.
Please do not copy the attached file htmlarea.php file into your Moodle 1.5 installation but add the four lines as shown below.
I hope this patch will stop the errors in your Moodle installation.
Urs
526 526
527 527 var first = true;
528 528 for (var i in this.config.toolbar) {
------------------------------------------------------------------------
529 if (this.config.toolbar.propertyIsEnumerable(i)) { // fix for prototype.js compatibility
------------------------------------------------------------------------
530 529 if (!first) {
531 530 createButton("linebreak");
532 531 } else {
533 532 first = false;
534 533 }
535 534 var group = this.config.toolbar[i];
536 535 for (var j in group) {
------------------------------------------------------------------------
537 if (group.propertyIsEnumerable(j)) { // fix for prototype.js compatibility
------------------------------------------------------------------------
538 536 var code = group[j];
539 537 if (/^([IT])\[(.*?)\]/.test(code)) {
540 538 // special case, create text label
541 539 var l7ed = RegExp.$1 == "I"; // localized?
542 540 var label = RegExp.$2;
543 541 if (l7ed) {
------------------------------------------------------------------------
------------------------------------------------------------------------
546 544 var tb_cell = document.createElement("td");
547 545 tb_row.appendChild(tb_cell);
548 546 tb_cell.className = "label";
549 547 tb_cell.innerHTML = label;
550 548 } else {
551 549 createButton(code);
------------------------------------------------------------------------
552 }
553 }
------------------------------------------------------------------------
554 550 }
555 551 }
556 552 }
557 553
------------------------------------------------------------------------
------------------------------------------------------------------------
I applied the changes to my htmlarea.php file and now the html editor doesn't load anywhere. It just shows a regular textbox. I am attaching the file if you could take a look at it. It seems pretty straightforward but then again I could mess something up.
Thanks,
Deon
Deon, I compared your htmlarea.php (right file) with my 1.5 lib (left file) and saw that 2 lines are missing in your file at line 544. When you add these lines your HTMLeditor should be back. The code in my previous posting showed only the different lines and a few lines before and after to show the context but left out all other lines to make the displayed code shorter - in this case these 2 lines. This did not mean to delete any lines not shown. Sorry that I did not mention this fact.
Much success
Urs
Left file: editor\htmlarea.php
Right file: test\htmlarea.php
539 539 if (/^([IT])\[(.*?)\]/.test(code)) {
540 540 // special case, create text label
541 541 var l7ed = RegExp.$1 == "I"; // localized?
542 542 var label = RegExp.$2;
543 543 if (l7ed) {
-------------------------------------------------------------------
544 label = HTMLArea.I18N.custom[label];
545 }
-------------------------------------------------------------------
544
-------------------------------------------------------------------
546 545 var tb_cell = document.createElement("td");
547 546 tb_row.appendChild(tb_cell);
548 547 tb_cell.className = "label";
549 548 tb_cell.innerHTML = label;
550 549 } else {
-------------------------------------------------------------------
Addition to posting:
Please do not delete any lines not shown, just add the four lines 529, 537, 552 and 553.

Thanks,
Deon
I've been trying to use the accordion format with the Kubrick theme but I'm having difficulties; I've used accordion in the past without problems using your readme instructions, but now I got a line error message while configuring the Kubrick header file, exactly when adding the anchor point.
Thanks in advance for your help,
Daniel
Don't have a full course set up in it yet - am just dabbling for now - will give you the url to look over when I do.
- will
seriously silly error on my part

- had left the old includes line in, adding the new one instead of replacing it.
Was having some issues with the accordion in some of the newer 1.9 themes.
I have attached a patched version of Accordion that I have modified to meet the course layout changes in 1.9. Can you have a look when you get the chance and fix any obvious errors.
This is working fine in my 1.9+ site now.
I have only changed the course=>format=>accordian=>format.php file
Has there been any further development with this Accordion format?
Our site is using the custom_corners theme and Julian's 1.9 version doesn't appear to work with that theme.
Its an excellent feature and we are very keen to use it.
That works perfectly now...!! Might I make a suggestion however? I attended moodlemoot in Brisbane and found out about accordian there in one of your sessions.
This file really needs to be placed in themes (or plugins?). It took me a good while to find it.
Now I need to figure out how to have a heading in the bars? Week 1, Week 2 etc...
At the moment it's just the bars, and I'd like to either show it by Topic (Topic 1, Topic 2 etc...) or by Date (9 October - 15 October).
Any ideas?

Anyone know how I might fix this issue?? There seems to be a bit of overlap when I use Firefox (3.0 - Haven't tried any other version yet...) IE7 displays just fine....

formatAccordian rapped in double square brakets as the option and it's not working.
Any idea's?
TIA,
Eric
On your server, go to Lang -> en_utf8 -> open moodle.php
Scroll down to the line that says,
$sting['format'] = 'Format';
and add this line after it:
$string['formataccordion'] = 'Accordion format';
Within your theme, browse to the styles_layout.css
Modify this:

to this:

It will then allow it to work with both Internet Explorer and Firefox.
Expanding on what Julian has done to get this working in 1.9, I've attached a zip file of how I got it working here at Catalyst. It's pretty much the same, but rather than needing to copy the accordion folder into each theme, we can place the needed files in course/format/accordion/lib and only add a CSS file to each theme to customise the look to fit your theme.
Also in the theme header and footer we can check the global $COURSE->format to conditionally include the required Accordion Javascript and CSS.
Hope this helps
Jonathan Harker
It doesn't work because of typos and omissions in instructions and code blocks to paste in. Changes:
- In readme.txt file:
- Copy to the course/format folder. (Typo.)
- Add missing closing } in footer code.
- Add missing directory in "include" line in footer code ("format" directory is missing from path.
- (Presumably) copy course/format/accordion/lang/en_utf8/format_accordion.php to lang/en_utf8/
I'm attaching my "fixed" version here.
Thanks ofr the update Jonathan.
JR
Hi Julian,
I saw you updated that theme to 1.9. I am trying to add an Accordion to my Topic list in a course. I would like it look similar to what Urs’ site looks like: http://chameleon-theme.unodo.de/ which uses the accordion from this site. http://moofx.mad4milk.net/#prototype
I’m running Moodle v. 1.9.9
I’ve done all that you said, but it is not working
Thanks for any help you may give me.
Gordon
I figured it out. Had to change the format to Accordion Format in the course. Works great! Thanks for updating this.
(but first, this is a really wonderful contribution, thanks so much for your time in it, & for contributing it to the moodle community!)
Am using the Accordion course format within a modified formal_white theme; and have the following appear:

Note the space between the topics headers (red arrows). This is clearly determined somewhere in the theme .css (they are closed up if I use the Accordion theme), but for the life of me I can't locate the determining .css.
What should I be looking for?
thanks,
Will
I was having the same space and just found it with this css from the accordian theme:
tr.section h3 {
margin: 0.1em 0.2em 0.2em;
}
Try it, that did it for me to tighten up the space.
Deon
that was the ticket!
Hi Timothy,
I copy my announcement in the thread "Endless" Moodle gives bad impression here again to give a short info about Accordion:
Accordion is a visual approach to reduce information on the Moodle course page. Modern web techniques allow behaviours to support e-learning needs and support nice design.
A new course format and the same "prototype" library with JavaScript behaviours as in the gallery and the "Drag ..." course on the Chameleon site bring live onto the course page. The behaviour works without the need to patch Moodle. I added cookie handling to that library. You return to your last open state when you leave and return to the course page.
Have fun folding through the topics of that course.
You can try Accordion and download the package in the Accordion course on the Chameleon site.
Urs
very impressive and interesting new concept.
I found the following strange behaviour using accordion in an existing course:
- I used the course format and the theme in an existing course
- In the course view the complete topics including the activities were coloured and not only the first text lines.
In the same system it works correct if use it in a new course.
I didn't add include info line anywhere. Does it happen with this?
Ralf
Ralf, from your description I read that when you add the Accordion course format and theme to one existing course the background? of all elements is colored.
This is strange. Did you try one or several courses?
You also write that a new course looks all right. Perhaps there is something special with the course you mentioned first.
Could you please check how other courses behave.
Thank you
Urs
If In the text of the basic textfield is a autolinked word, this one is set in a separate line with an other font. I add two screens.
Ralf
Never mind Ralf, thank you for your feedback and the screens.
From your screens I see two points
1) You write several lines into the "Summary" as it is proposed for this field. If you want to build your course with Accordion please use another approach:
- Write some few words into the "summary" field because this is used as the toggle.
- Write your summary text into a "label" and place this "label" first in the topic.
You will get a line with few words as the toggle and you can read the summary when the topic is open.
2) The auto linked words seam to interfere with the Accordion theme. I will investigate.
I hope this helps
Urs
Thank you Urs.
It is very attractive and functionally appealing.
It seems that that at present Accordion is a topic based course. Is there, or are there plans for an Accordion Weekly course, wherein the "green bars" would turn pink for when they represent the current week?
Tim
Timothy, yes Accordion is a topic based course format.
My plans are to make Accordion available for real courses. If you and others are interested in a weekly format, I will be pleased to add this format.
Let's take the numbers of positive ratings with "Perfect answer!" for this posting as a measurement how many people would like to use Accordion with a weekly format. Ok?
@"... wherein the "green bars" would turn pink for when they represent the current week?"
Deon has shown some CSS you can use with Accordion to highlight the current topic. The same would be possible for the weekly format.
Urs
I am also feeling more social constructivist/tionist in my old age, aware of the fact that my students do not have internet at home.
Thusly, I have plans to implement moodle for mobiles soon.
I am not sure if Accordion would work with moodle for mobile (Jamie if you are listening please let me know).
But I do think that accordion is a perfect answer and I have registered my approval in the way you suggest.
Cheers,
Tim
Topics, Weeks and Tabbed would make the perfect set
(.. o yes, and the social format for Martin.)
I have been playing with this format to what I need. I have made two changes so far and thought I would share it in case anyone needs these. One is the ability to click on the open topic to close it again still maintaining the accordian feature (thanks to the moo.fx forums), and the ability to highlight the section and have the closed section be highlighted (see screenshot).
For the first, download the attached file and overwrite the same named file in the theme->(your theme name)-> acco folder.
For the second it is a css asddition.
#course-view .current .side{
background: none;
}
#course-view .current td{
}
#course-view .current h3{
background: #FFFF99;
border: solid 3px #FFFF66;
}
The last (h3) is the one for the highlight topic, the others control the right&left side color on highlight and the td controls the background of the highlighted topic.
Screenshot
Deon, thank you for sharing your great work.
@"One is the ability to click on the open topic to close it again ..."
This feature is great when the user wants to see a course overview. I tried your changes and saw that this all closed state is not saved in the cookie. When you leave the course view and come back the last clicked topic will be opened again. I would not want to use this feature because of this inconsistency.
One way out is to save the closed state in the cookie too. Could you investigate? That would be great.
Your CSS examples are very helpful. I will add the most important CSS properties into the "README" in one of the next versions. For now I will go on collecting user feedback.
Urs
Here's a listing of files in the /nitle_moodle/themes/chameleon directory (note I moved 'acco' into there cos I thought it belonged):
-rwxrwxr-x 1 www admin 261 Jan 31 13:05 README.html
drwxrwx--- 8 www admin 272 Apr 25 17:15 acco
-rwxrwxr-x 1 www admin 5162 Apr 11 01:38 config.php
-rwxrwxr-x 1 www admin 894 Jan 31 13:05 favicon.ico
-rwxrwxr-x 1 www admin 1301 May 31 16:09 footer.html
-rwxrwxr-x 1 www admin 1697 May 31 16:08 header.html
drwxrwxr-x 24 www admin 816 May 4 13:42 pix
-rwxrwxr-x 1 www admin 1010 Apr 7 23:07 styles.php
-rwxrwxr-x 1 www admin 755 Apr 11 01:38 styles_layout.css
-rwxrwxr-x 1 www admin 0 Jan 31 13:05 temp_user_styles.css
drwxrwxr-x 11 www admin 374 May 4 13:42 ui
-rwxrwxr-x 1 www admin 5923 Apr 11 01:38 user_styles.css
And here's a screenshot of the non-working page:
TA for any help.
Hello Mark,
a short look at your site showed that the JavaScript files necessary for Accordion are not loaded.
Accordion is a course format which you select in your "Course Settings" as "Format:" "Accordion format". As guest I can't look at those settings, did you set the course format?
Additionally I saw that the body CLASSes and IDs on that page are wrong. Your body ID is for example id="http:--ec281.lly.earlham.edu:16080-nitle_moodle-course-view"
and it should be id="course-view"
. The URL in the name of the course id indicates a problem in the Moodle configuration.
I hope I could help you
Urs
Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)
Accordion in Moodle 1.6 Beta 5 (2006050505)
Due to changes in the course format Accordion does not work any more in this Version. Please read Ger's posting about changing 1 line to update the Accordion format.php file.
Urs
Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)
thanks Urs,
this is very elegant and will likely be very appreciated by our students
Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)
Urs,
- is it possible to allow accordion to work ONLY on the my page of a student / teacher?
- is it possible to add this nice accordion mechanism to other course formats, like "collabse" extends the topics format?
Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)
Hi Ger,
1.) Because Accordion is a course format it can't be attached to "My" page. The "MY" page is a course overview page. On the other hand by changing the routine which writes the course overview for every course you can integrate an Accordion display on this page. Changing this routine is more difficult and probably needs patching Moodle. I didn't look at an solution in detail.
2.) You can add the accordion mechanism to any course format. You need to change the "format.php" in "course/format/".
In the moment Accordion uses the "prototype" and "moo.fx" JavaScript libraries. When the decision to integrate the YUI library into Moodle proves to be right and this library will be part of Moodle 1.7 I will rework Accordion to use the YUI libraries. Accordion can then be used as an example how to implement the Accordion mechanism into Moodle.
I hope my answers give you the information you need.
Urs
Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)
Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)
Hi Bruno,
thanks for pointing up what "Accordion" is and what "Chameleon" is. Your 5 information might help to clarify and make understanding and installation easier for some users.
Urs
Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)
I'm using moodle 1.6 on a windows xp/apache2.0/php 5/mysql 5 on a localhost development machine and can't get accordion going at all. I've followed Bruno's instructions and tried to install accordian for the chameleon and formal white themes and I get nothing...
the only visible difference is when I try to assign a format to a new course there is a new entry in the dropdown list to choose from:
formatformat_16
has anyone managed to get accordian working on windows or is there a more concise installation 'manual' for it.....?
First of all, loving this course format. It adds that little bit of wow factor to a course. Thanks to everyone who has contributed so far.
One thing stopping us from setting this as the default course format for new courses however is the loss of some of the functionality of the standard topic format.
Some of our courses are quite empty and can fit the contents of all topics on one screen. With the accordion collapsed though, you have to click each summary to see what is there which is an unnecessary barrier.
I'm wanting to bring back some of the functionality of the topics format where you can view all topics in full or collapse them to view only one topic (navigating around using the 'jump to' menu). I'd like accordion format to work like the collapsed view (with the clickable summaries replacing the 'jump to' menu), but also have the option to expand all topics to view everything at once.
Unfortunately for me, my knowledge of javascript is sadly lacking and I can't figure out how to modify the way the accordion behaves. I've attached my version of accordion/format.php which has the collapse/expand box icons reinstated. I'd like to some how get these to toggle between the default behaviour of the accordion and viewing all topics in full.
Can anyone please point me in the right direction?
Cheers from down under

Can anyone point out where to install Accordion and where can i get it.
i am using Moodle 1.8.2
More destructive, is that HTML code seems borked up with Accordion.
If you choose to edit the page (which looks corrupted: no spacing between h2 and p, removed bullets, no ordered or unordered lists) the editor presents everything as it should be. When you you save, however, you're back to the specialized accordion code which breaks a lot of important layout choices.
any ideas?
JC
It throws a wrench in H3 tag spacing in your code (insert label).
JC
Hi There
I am have an issue with this as well and was wondering where it is you modify the code mentioned above?
Cheers
John


When I switch the course settings to another format (like Weekly), the text renders normally. Is this some sort of JavaScript glitch?