Accordions Overview

Relevant to: faculty and staff

This article contains information considered accurate at the time of publishing. Technology updates, changes in University security practices, policies and procedures may effect the information in this article - updates to articles are scheduled on a periodic basis and will address any required changes.

Overview

Elements from Brightspace’s Creator+ tool allow developers and content creators to add dynamic components with a user-friendly authoring experience that does not require HTML coding knowledge.

Accordions are useful when you have a list of items with additional information to learn about each item. Using an accordion, allows the learner to focus on learning the list first, then expanding their understanding by opening each accordion. Scaffolding content in this way supports the cognitive organization of this information.

Insert an Accordion

1. Create a File (Web page).
   


2. From the html editor, select Creator+ Authoring Tools, then select Insert Element.
   


3. Select Accordion.
   


4. Select Format Options. Unnumbered means that each tab name will not have a number assigned. Numbered means that a number will go in front of the tab name. For numbered example: 1. Step 1. For unnumbered, Step 1.
   


5. Fill in Learner Instructions to ensure that the learners know there is a dynamic element. For example, “Select each item to learn more.”


6. Fill in Accordion 1 Tab Title. This will be the name of the first tab. For example, Ingredients.
   


7. Fill in Accordion 1 Content. This will be the content that will be displayed under that tab. For example: All the ingredients used to make a baked apple pie will be covered in this tab.
   


8. To add additional accordions, select the Add Accordion Item on the bottom left.
   


9. Repeat the process for each accordion tab you want to create.
10. Once finished, select Preview.
    


11. If everything looks correct, select Insert.
    


12. Select Save and Close at the bottom of the screen to complete your work.
    

Edit an Accordion

1. Navigate to the webpage that has Accordions and select Edit HTML (Web Page) from the drop‑down menu on right of the title.
   


2. Once the editing window opens, click on the Accordion itself to open the Edit Panel, then select the pencil icon.
   


3. Make your changes to the content in the Accordion, then select Preview to review your changes.
   


4. In the Preview window, select Insert once you have confirmed your revisions are correct.
   


5. Back in the editing window, select Save and Close at the bottom of the screen to complete your revisions.