Tabs and Accordions can be used various ways for making text, lists, or sequential steps more interesting, paced, and interactive. They're great for questions & answers, lengthy readings, live presentations, or any area where learners should click for more information.
Accordions move your learners vertically down the page and display only the heading; learners must click to see more.
Tabs move your learners horizontally across the page and the first heading and subtext is revealed; the learner must click to see the remaining tabs.
Sample tabs: learner preview mode on the left and edit mode on the right
Sample accordion: learner preview mode on the left (collapsed) and edit mode on the right (expanded)
How to add Tabs and Accordions
- Create a new step on your course Path and open the step.
- Select "Interactive" then "Accordion" or "Tabs." You've added a Block to your step!
- Replace the template label and body text with your own.
- Optionally add more Blocks. When finished, hit Publish.
Editing Tabs and Accordions
- Within the body, highlight any text and the formatting options will pop up (labels can't be formatted, to preserve usability).
- You can toggle between Accordion and Tabs without losing content if you'd like to see both options.
- Add and delete individual tabs or accordion rows or drag-n-drop them into a different order. Click and hold the arrow icon to drag-n-drop.
- Use the step Preview to see and interact with the Block like a learner.
Within either interactive Block, you can...
- Add labels to Tabs or Accordions
- Add and format body text within each section
- Add headers
- Bold, italicize, or underline text
- Add bulleted or numbered lists
- Change text justification
- Add subscripts and superscripts
- Select from available text styles and colors
- Add a hyperlink to an external site (opens in new tab)
- Use the </> button to convert to code (monospace font and syntax highlighting)
- Use the Tx button to strip all formatting
- Click or tap to expand and collapse Accordions or click through Tabs just like browser tabs.
Q. How do I add a new hyperlink?
A. Highlight the text you'd like to hyperlink. In the editor that pops up, select the hyperlink button. Enter your link and then hit Enter.
Q. How do I link to a file hosted in my Media Manager?
A. Add a new Block. Select Media, then add the "Attachments" Block to add a file from your Media Manager or upload a new file.
Q. Can I add an image inside the body of a Tab or Accordion?
A. Great question. Not currently, but we are considering this for the future. In the meantime, you can insert an image Block below or above.
Q. How do I add custom styles to my text?
A. Custom CSS is not currently supported in Blocks (more styling options coming soon).
All Blocks enable you to...
- Toggle between similar layouts.
- Duplicate the Block to edit and reuse on the same step.
- Reorder Blocks up and down the page.
- Insert additional Blocks above or below.
- Delete Blocks.
- Preview the entire step as a learner.
- Undo previous edits (Control+Z to undo your last edit to text, or click "Publish," then "Discard" to undo all edits since you last published the step).