Browse Articles

Browse Articles

Rise 360: How to Use Accordion Blocks

Article Last Updated

This article applies to:

Rise 360

Accordion blocks let you explore related concepts in media-rich interactions. They’re just the thing for step-by-step processes.

  1. Insert an Accordion Block
  2. Add Content and New Items
  3. Switch Between Accordion and Tabs Block Types
  4. Customize the Block Settings
  5. Accessibility

Step 1: Insert an Accordion Block

  1. Open a Rise 360 course, then edit an existing lesson or create a new one.
  2. Click All Blocks in the blocks shortcut bar or the insert block icon that appears when you mouse-over a boundary between blocks.
  3. From the sidebar that appears, choose the Interactive category in the block library, then select Accordion.

Step 2: Add Content and New Items

  1. Hover over an existing accordion block and click the Edit button that appears.
  2. The edit panel opens on the left-hand side. You can modify the title and text of each accordion item. Click the camera icon to add images, multimedia, or web content. If a photo is uploaded, you can change the alignment under Image Options. If media is already uploaded, click Edit to replace it, remove it, or, if a video is uploaded, manage captions.
  3. Click the Add Item button to add additional accordion items. There’s no limit to the number of items you can add!
  4. Click Close in the upper right corner to return to your block lesson.

You can also edit title and body text directly inside the accordion block. However, you can only edit images, multimedia, and web content in the edit panel. 

Step 3: Switch Between Accordion and Tabs Block Types

Think your accordion items would look better as tabs? Then change it up! Hover over an existing accordion block, then click the Accordion button that appears and select Tabs from the menu.

That’s it! Reverse the process if you want to switch back to the accordion layout.

Step 4: Customize the Block Settings

 

Hover over an existing accordion block and click the Design icon that appears on the right-hand side to customize block settings. 

Here, you can change padding, background options, and card color, as well as update accordion behavior and disable zoom feature for images.

Accessibility

Accordion blocks are accessible. If you use media, ensure images have alternative text (alt text) and videos have closed captions. If you update the background color, check contrast colors to ensure text is readable. Conduct testing with keyboard navigation and screen readers to ensure accessibility. For further guidance on creating accessible content, refer to our accessibility design tips below: