Accordion Resource to reduce the “Scroll Of Death” in Moodle 1.9

AI in Education Leaderboard Post Page
Ai In Education Square Post Page

--- Advertisement ---

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

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

Accordion Resource to reduce the "Scroll Of Death" in Moodle™ 1.9

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”

Accordion Resource to reduce the "Scroll Of Death" in Moodle™ 1.9

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!

8 Responses

  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.


  4. Wow!
    A really creative and clever idea for hide resources without the traditional “hide”.
    Saludos desde Chile.

Leave a Reply

Your email address will not be published. Required fields are marked *

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

The Latest

The eLearn Podcast

--- Advertisement ---

Subscribe to our newsletter

Education technology has the power to change lives. 

To get the latest news, information and resources about online learning from around the world by clicking on the button below.