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).
    Create a new web page in Brightspace

  2. From the html editor, select Creator+ Authoring Tools, then select Insert Element.
    Showing drop‑down menu with Insert Element option

  3. Select Accordion.
    Dialog box with Accordion option selected

  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.
    Format Options dialog showing numbered vs unnumbered toggle

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

  6. Fill in Accordion 1 Tab Title. This will be the name of the first tab. For example, Ingredients.
    Entering tab title (e.g. 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.
    Entering content for the first accordion tab

  8. To add additional accordions, select the Add Accordion Item on the bottom left.
    Accordion 3 content area with a text editor and the sentence 'This tab will provide the nutrition facts for an apple pie.' Below the editor, there are buttons labeled Add Accordion Item, Preview, and Cancel.

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

  11. If everything looks correct, select Insert.
    Insert button in the dialog

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

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.
    Edit HTML option in drop‑down menu

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

  3. Make your changes to the content in the Accordion, then select Preview to review your changes.
    A preview button in the editor

  4. In the Preview window, select Insert once you have confirmed your revisions are correct.
    The insert button in the accordion edit.

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