Accordion Format

Accordion Format

by Chardelle Busch -
Number of replies: 68
Picture of Core developers
Hi Urs,

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
Average of ratings: -
In reply to Chardelle Busch

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

Great, Accordion got it's own thread wink

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

In reply to Urs Hunkler

Re: Accordion Format

by Chardelle Busch -
Picture of Core developers
Hi 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.
In reply to Chardelle Busch

Re: Accordion Format

by Chardelle Busch -
Picture of Core developers
One more little question Urs.  I don't want the section number to show up on the left side.  The css looks like this:

<table class="stretchdtab"> <tbody>
<tr>
<td class="left side">
<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. 
In reply to Chardelle Busch

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

Chardelle,

to hide the number I use

#course-view .section .left a {
  display:none
}

Please see also the Acoordion theme.

Urs

In reply to Chardelle Busch

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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.

In reply to Urs Hunkler

Re: Accordion Format

by Chardelle Busch -
Picture of Core developers
Yes I do but I still get the errors, for example, when adding a discussion post. I wonder if there is something in the chameleon theme that is needed? Since I'm using a different theme. I'll keep checking.  Although, we need to find a better solution, right?  Because even if we can get it to not conflict with the HTML editor on non-course pages, the teachers will still get the errors on the course homepage when adding labels, etc... Right?  Which isn't ideal.
In reply to Chardelle Busch

Re: Accordion Format

by Chardelle Busch -
Picture of Core developers
Okay, you can ignore the last post. The errors are now gone. Actually it turned out to be something with the header.html. I was calling the accordion.php file twice--maybe that was it?  Probably the same thing with you Will.  I now have it like this:

<?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'); ?>


In reply to Urs Hunkler

Re: Accordion Format

by James Ballard -
Hi Urs,

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
In reply to James Ballard

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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

In reply to James Ballard

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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

In reply to Urs Hunkler

Re: Accordion Format

by James Ballard -
Hi 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
In reply to Urs Hunkler

Re: Accordion Format

by James Ballard -
Hi Urs

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

In reply to Urs Hunkler

Re: Accordion Format

by Deon Metelski -
Hi 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
In reply to Deon Metelski

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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
------------------------------------------------------------------------
------------------------------------------------------------------------
In reply to Urs Hunkler

Re: Accordion Format

by Deon Metelski -
Hi Urs,

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
In reply to Deon Metelski

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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 {
 -------------------------------------------------------------------
In reply to Urs Hunkler

Re: Accordion Format

by Daniel Garcia -
Hi Urs,
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
In reply to Urs Hunkler

Re: Accordion Format

by Will Taylor -
Am using Accordian vers.0.3 in both Moodle 1.5.3 and 1.6 latest - and I have the HTMLeditor error cascade on both installations.

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
In reply to Will Taylor

Re: Accordion Format

by Will Taylor -
HTMLeditor problem fixed for me -
seriously silly error on my part blush
- had left the old includes line in, adding the new one instead of replacing it.
In reply to Urs Hunkler

Re: Accordion Format

by Julian Ridden -
Urs,

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
Average of ratings:Useful (1)
In reply to Julian Ridden

Re: Accordion Format

by Lynn Harvey -

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.

In reply to Julian Ridden

Re: Accordion Format

by Robert Richmond -
Hi Julian,

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?
In reply to Robert Richmond

Re: Accordion Format

by Robert Richmond -
Found it. You need to go into editing mode ! shy

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

Overlap
In reply to Robert Richmond

Re: Accordion Format

by Robert Richmond -
Anyone?
In reply to Robert Richmond

Re: Accordion Format

by Eric Kemsley -
I'm trying to get this work on moodle 1.9.2, but when I go to change the format of a course, I get :
formatAccordian rapped in double square brakets as the option and it's not working.

Any idea's?

TIA,

Eric
In reply to Eric Kemsley

Re: Accordion Format

by Robert Richmond -
Yes.

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


In reply to Robert Richmond

Re: Accordion Format

by Robert Richmond -
With respect to this issue , I figured out how to correct it. I'm sure its not the best way, but it works.

Within your theme, browse to the styles_layout.css

Modify this:

Before

to this:

2.png

It will then allow it to work with both Internet Explorer and Firefox.
In reply to Julian Ridden

Re: Accordion Format

by Jonathan Harker -
Hi there,

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 smile
Jonathan Harker

In reply to Jonathan Harker

Re: Accordion Format

by Marcus Leonard -
This is a nice refactor of the code but, in case someone finds this thread and can't get this to work...

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/
Once you sort all this out, it works a treat.

I'm attaching my "fixed" version here.
In reply to Jonathan Harker

Re: Accordion Format

by Julian Ridden -
I only just discovered this. I really need to check random forums more often smile

Thanks ofr the update Jonathan.

JR
In reply to Julian Ridden

Re: Accordion Format

by Gordon Brooks -

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

In reply to Gordon Brooks

Re: Accordion Format

by Gordon Brooks -

I figured it out.  Had to change the format to Accordion Format in the course.  Works great!  Thanks for updating this.

In reply to Chardelle Busch

Re: Accordion Format

by Will Taylor -
OK, I've got a real question now ;^)
(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:

topics_spacing

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
In reply to Will Taylor

Re: Accordion Format

by Deon Metelski -
Hey 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
In reply to Chardelle Busch

Re: Accordion Format

by Timothy Takemoto -
It would be nice to see a screen shot of the Accordion format or a link to where we can see it.
In reply to Timothy Takemoto

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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

In reply to Urs Hunkler

Re: Accordion Format

by Ralf Hilgenstock -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Translators
Hi 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
In reply to Ralf Hilgenstock

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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

In reply to Urs Hunkler

Re: Accordion Format

by Ralf Hilgenstock -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Translators
Sorry Urs, I had a second lok and found that it is an other problem.

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
In reply to Ralf Hilgenstock

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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

In reply to Urs Hunkler

Re: Accordion Format

by Timothy Takemoto -

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

In reply to Timothy Takemoto

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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

@"... 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

Average of ratings:Useful (5)
In reply to Urs Hunkler

Re: Accordion Format

by Timothy Takemoto -
My courses are getting ridiculously long.

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 
In reply to Timothy Takemoto

Re: Accordion Format

by Ger Tielemans -

Topics, Weeks and Tabbed would make the perfect set smile

(.. o yes, and the social format for Martin.)

In reply to Chardelle Busch

Re: Accordion Format

by Deon Metelski -
Hello all,

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
screenshot
In reply to Deon Metelski

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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

In reply to Chardelle Busch

Re: Accordion Format

by Mark Pearson -
I'm tearing my proberbial hair out trying to get the accordion style to work properly. I've followed the instructions and reread them so I think I'm doing what I oughtta. Here's the URL to the recalcitrant page (guest login works):

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:

screenshot of non working accordion javascript

I made all the edits required to header.html and footer.html. The chameleon theme works fine (although I haven't tested the saving part yet) and I'm flummoxed as to why accordion doesn't operate.

TA for any help.

In reply to Mark Pearson

Re: Accordion Format

by Urs Hunkler -
Picture of Core developers

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

In reply to Chardelle Busch

Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)

by Urs Hunkler -
Picture of Core developers

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

In reply to Urs Hunkler

Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)

by Bruno Vernier -
just a note to say I had a successful install of accordion on moodle 1.6 and lived to blog about it at http://moodle.org/blog/index.php?userid=5584

thanks Urs,

this is very elegant and will likely be very appreciated by our students smile
In reply to Bruno Vernier

Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)

by Ger Tielemans -

Urs,

  1. is it possible to allow accordion to work ONLY on the my page of a student / teacher?
  2. is it possible to add this nice accordion mechanism to other course formats, like "collabse" extends the topics format?
In reply to Ger Tielemans

Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)

by Urs Hunkler -
Picture of Core developers

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

In reply to Urs Hunkler

Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)

by Ger Tielemans -
Mmm, is it then maybe possible to give My Page it's own overview format (so students could choose their own desktop skin)
In reply to Bruno Vernier

Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)

by Urs Hunkler -
Picture of Core developers

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

In reply to Urs Hunkler

Re: Accordion Format - Format changed in Moodle 1.6 Beta 5 (2006050505)

by sam butler -
Hi,

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

In reply to Chardelle Busch

Re: Accordion Format - Modifying behaviour

by David Jackson -
Hi folks,
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


In reply to Chardelle Busch

Re: Accordion Format

by Robert Smith -
Anyone else having issues with the Accordion format and Windows Cleartype using IE? - screenshot attached?

Cleartyre issues?
In reply to Robert Smith

Re: Accordion Format

by AjnabiZ ... -

Can anyone point out where to install Accordion and where can i get it.

i am using Moodle 1.8.2

In reply to AjnabiZ ...

Re: Accordion Format

by Bruce Comerford -
In reply to Bruce Comerford

Re: Accordion Format

by jon catuccio -
I think we're seeing the IE issue in the screenshot above.

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
In reply to jon catuccio

Re: Accordion Format

by jon catuccio -
When you paste in the code for the Accordion "bars", get rid of this:

tr.section h3 {
  margin: 0.1em 0.2em 0.2em;
 }

It throws a wrench in H3 tag spacing in your code (insert label).

JC

In reply to Chardelle Busch

Re: Accordion Format

by Craig Gunderson -
I have found an issue with the Accordion format that I was hoping someone could shed some light on. Basically any text contained within the accordion area renders differently in IE7 and IE8 (it looks fine in Firefox). It might not be immediately apparent with normal text, but bolded text renders with jagged edges.

7-22-2009%205-37-41%20PM.gif7-22-2009%205-37-41%20PM.gif
When I switch the course settings to another format (like Weekly), the text renders normally. Is this some sort of JavaScript glitch?