Tame Your Moodle Pages with H5P Accordions!

Ever feel like your Moodle pages are endless scrolls of information, overwhelming your students before they even start? You’re not alone! Long pages can be a real deterrent to engagement. Thankfully, H5P offers a fantastic solution: the Accordion.

In this installment of our H5P series (if you’re new to H5P, check out our previous video on what it is and how to embed activities!), we’re diving into the simplicity and effectiveness of the Accordion.

What is an H5P Accordion?

An Accordion is exactly what it sounds like – a way to elegantly hide and show content on your Moodle page. Imagine a series of collapsible panels, each with a title. When a student clicks on a title, the content within that panel expands, and typically, any other open panels will close. This keeps your page tidy and allows students to focus on one section at a time, eliminating that daunting “big massive page scroll.”

See the Accordion in Action

Let’s look at an example. In our H5P demo course, we have an Accordion with two panels: “Favorite Empire Between Songs” and “My Favorite YouTube Videos.”

When you open the “Favorite Empire Between Songs” panel, you’ll see a list of songs from Empire Between, a musical project where I compose and record, and my daughter writes the lyrics and melody. If you’re curious, there’s a link to listen to the music!

Now, when you click on “My Favorite YouTube Videos,” notice how the first panel automatically closes. This is the beauty of the Accordion – it prevents your page from becoming an unwieldy mess of open sections. Each panel can contain links, formatted text, and other relevant information, helping you present your content clearly and concisely.

How to Create Your Own H5P Accordion

Creating an Accordion is straightforward. Here’s a step-by-step guide:

  1. Access Your Course: Log in to your Moodle course.
  2. Add an Activity or Resource: In the desired topic section (e.g., Topic Two), click “Add an activity or resource.”
  3. Select H5P: Choose “H5P” from the activity list.
  4. Open the Content Bank: Since you haven’t created the Accordion yet, you’ll need to go to the “Content Bank.” This usually opens in a new window.
  5. Add New Content: In the Content Bank, click the “Add” button and select “Accordion” from the list of interactive content types.
  6. Title Your Accordion: Give your Accordion a title (e.g., “Accordion Practice”). This is the internal title for the Accordion itself and doesn’t necessarily have to be displayed to students.
  7. Create Your Panels:
    • Panel Title: Give your first panel a title (e.g., “Panel One”). This is what students will click on to expand the content.
    • Panel Content: Add your text content for this panel. You can format the text with bold, italics, bullets, links, and even horizontal rules. While you can’t easily embed images directly, you have good control over text appearance and can adjust font sizes by percentages for better mobile responsiveness.
    • Add More Panels: Click “Add panel” to create additional panels (e.g., “Panel Two,” “Panel Three”), repeating the process for each.
  8. Set Heading Tags (Optional): You can choose the heading tag (e.g., H2, H3, H4) for your panel labels. This can affect the CSS or colors applied to them.
  9. Save Your Accordion: Click “Save.” Your newly created Accordion is now stored in your Content Bank.
  10. Embed in Your Course: Close the Content Bank window and return to your Moodle page where you were adding the H5P activity.
  11. Select Your Accordion: Under “Package files,” search for your Accordion (e.g., “accordion practice”). Select “Select this file.”
  12. Save and Display: Click “Save and display.”

Voilà! You now have an interactive Accordion embedded directly into your Moodle course.

Activity Completion Settings

While Accordions aren’t typically graded activities, you can set activity completion based on viewing. This means a student simply needs to click on and view the content within the panels for the activity to be marked as complete. This is a useful feature for tracking student engagement with your content.

Adding an H5P Accordion is a simple yet powerful way to enhance the user experience on your Moodle pages, making content more digestible and visually appealing.

For more detailed information and comprehensive Moodle 4.0 tutorials (over seven hours of video content!), be sure to check out the courses available at ricoshae.com.au.

Stay tuned for our next H5P video!