Create expandable module content areas with Bootstrap Toggle

Last reviewed: 24/9/2019

Bootstrap Toggle allows users to create expandable module content areas presenting information more succinctly.

Our Acting department colleagues have been successfully using Bootstrap Toggle in their Moodle modules, which allowed them to fit a lot of information in without making their module pages look too busy.

How to add Bootstrap Toggle as an activity to your Moodle module

Step 1: Turn editing on (you can do this by clicking on the cog menu on the top right hand side of your module page) to make changes to your module contents (Fig. 1).

Figure 1 - Turn editing on by clicking on the cog menu on the top right hand side of your module page.
Figure 1 – Turn editing on by clicking on the cog menu on the top right hand side of your module page.

Step 2: Navigate to topic/week and select ‘+ Add an activity or resource‘.

Step 3: A pop up window will appear with a number of options for activities or resources to add to the topic. Under RESOURCES section (you may need to scroll down) find Bootstrap Elements (Fig 2). Click ‘Add‘.

Figure 2 - pop up window with options for activities or resources to add to the topic, Bootstrap Elements highlighted under RESOURCES area.
Figure 2 – pop up window with options for activities or resources to add to the topic, Bootstrap Elements highlighted under RESOURCES area.

Step 4: Give your activity a Title and add Content (this can be your text, images links – anything you want). Then select Element Type – we recommend Toggle (which expands do display content when clicking on the Title). See Fig. 3.

Figure 3 - Bootstrap Element activity menu with Toggle Element type selected.
Figure 3 – Bootstrap Element activity menu with Toggle Element type selected.

You also get an option to select an icon – you can leave this blank, or pick an icon to display on the left side of the Title (see Fig. 4).

Figure 4 – Icon selection menu in Bootstrap Element window.

Step 5: Click ‘Save and return to course’ when finished and review the activity in topic.

Even if you add an icon, you will see that a grey arrow icon will be shown on the left of the Title by default (Fig. 5). This one is interactive and changes direction based on the selection setting.

Figure 5 – Finished Bootstrap Toggle activity, with no icon selected when building the activity and with the default grey interactive arrow icon highlighted on the right hand side of the activity title.