In his 2009 post in, Moodler Abrar Ullah, introduced his Accordion Resource which allows one to hide and show labels and text.

Post Pages - Post Inline - WIRIS

I have recently implemented Abrar’s Accordion Resource on my Moodle 1.9.7 site, with this post here explaining how I did it for my site. In that post of mine, I showed how I embedded a (you can do the same for a Youtube video) within an Accordion resource on my site. You can follow the main discussion here.

Screen1: The Accordion resource as introduced by Abrar in his post on

The image shows a multi-lined label of text within the accordion. The Accordion Resource is NOT limited to just labels and HTML code.

I have, since then, discovered that with some tinkering around, you can reduce the Scroll Of Death even further by embedding actual resources and activities on your Course Page with the Accordion Resource. Here’s a screenshot showing the Accordion Resource used for this purpose:

A de-cluttered course page page “Accordionised”

Notice the Book resource within the Accordion? Well you can put any resource inside.

For a LIVE demo, you can login to my website
Username: student
Password: moodle

To see it in action on my IT course page, here’s a Youtube video.

In a followup post, I will be explaning how you can use the Accordion Resource Editor on your own Moodle 1.9 course page. In the meantime, for those who cannot wait, you may email me at [email protected] for help on how to do this. Stay tuned for more news.

Cheers and have a great weekend!

Previous articleSlides from my #iMoot “Many Faces of Moodle” presentation
Next articleCheck out the “Slides” course format for Moodle 2.0


  1. Nice Recourse.

    A question, How do you do for insert another type of recourses into the accordion? For me, its only posible write text and html.

    Nice site, thank you.

  2. *chuckle* Thanks for the question.
    I’ve been trying to come up with a Youtube video to show how this is done.
    Sleep deprivation caused me to sleep early last night.
    ANYWAY, it should be out this weekend (Saturday 14/5/2011).
    Clue: Firefox’s “View | Page Source” to view the source code of your
    Moodle coursepage; then find the html code (usually starts with a tag)
    and copy it. then…here’s the source code inside my accordian editor. I copy
    and pasted it into my Accordian editor using HTML editing mode:

    Think you got it? If that’s not clear enough (I don’t assume it is), I’ll come up with the
    step-by-steo video on Youtube this weekend.

    Note the class code that goes: ?
    If you don’t put the class=”no_dot_list” part then you end up with bullet points before the
    resource name. So where did I define the class “no_dot_list”?
    It’s inside the theme’s CSS file named isometric.css. Here it is:

    list-style-type: none;

    The theme I use is isometric by Mary Evans. It’s was uploaded by her and then removed
    from the repository. Because the theme was written from code from where the original author did not want it to be released as GPL.
    You can use it for free as long as the footer gives credit to
    The menu at the top is the menubar which comes from a file named menubar.php.

  3. Oops apparently the forum doesn’t allow li tags to be posted. So a whole bunch of HTML code which was in my previous post didn’t appear. So let’s have another go shall we?

    here’s the source code inside my accordian editor. I copy
    and pasted it into my Accordian editor using HTML editing mode:

    Well, code inside the text file (shown in the link above) is the part that was missing from my last post.



Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.