Using Atto - The Moodle Editor

Accordions or collapsing regions

How do I add them?

  • Click the Generico button and choose accordion_container.

  • Click insert when prompted. This will add some obscure looking code to your page. Don't panic!

These codes are called markup tags. They have a starting tag, "accordion_container" and an ending tag "accordion_container_end". All collapsing regions, called cards, of the accodion should be placed between them.

  • Click where indicated above and press enter to create a blank line between the start and end tags.
  • Make sure you have placed the cursor on the blank line between the start and end container tags then click the Generico button again and choose accordion_card.

  • Enter the heading for the accoridon card and click Insert. There will be even more crazy code!

  • Another set of start and end tags has been inserted, this time for a new card in the accordion.

  • The highlighted region shows the heading text. You can change this at any time.
  • To add content to the card, click at the end of the cards start tag (the one with the heading), press enter and start typing. The text I've added is highlighted below.

This is my content! I can do any formatting I wish, for example:

  • a
  • bulleted
  • list


  • Only one card of an accordion can be open at a time. If you want to allow more than one card open, they each need to be in their own accordion container.
  • You don't need to use the Generico button to add these. The code can just be typed in or you can copy and paste them. If you're creating several cards at once, it might be faster to create a container, one card and then copy / paste that card as many times as you need.