Using accordion panels

Question

How do I use accordion panels within articles for the knowledge base?

Solution

Use the Accordion Panel template to insert five panels into your article.

  1. Select Templates in the editor window.
  2. Choose Accordion Panel from the Formatting section.

The panel set will appear in your article.

If you want fewer than five panels:

  1. Select Source
  2. Locate the heading-panel-# (or panels) that you wish to delete.
  3. Highlight the <div> contents then press Delete on your keyboard.
  4. Select Source to return to the visual editor view. Modify your panel titles and content accordingly.
  5. Select Update Article or Save as Draft.

If you want more than five panels:

  1. Select Source
  2. Locate the heading-panel-5 then copy its <div> contents. Be sure to get the div tags and its component content.
  3. Adjust the identifiers accordingly:
    1. If you're adding one more panel, change the heading-panel-5 labels to heading-panel-6
    2. If you're adding two more panels (and so on), change theheading-panel-5 labels to heading-panel-6, then 7, then 8, and so on.
  4. Select Source to return to the visual editor view. Modify your panel titles and content accordingly.
  5. Select Update Article or Save as Draft.

If you want to use an anchor link to content within a panel:

You can add an anchor into a panel to refer to content within another panel. However, in order for it to work in the UO Service Portal, it needs to behave as a button to work.

Process

  1. Insert your anchor as you would normally from the visual editor view and take note of the anchor name. (For example: heading-panel-1)
  2. Add a link to your desired location anywhere in the article.
  3. Select Source then locate the link you just created and modify the <a> tag contents, be sure to enter the following classes:
    1. Example: <a aria-controls="heading-panel-1" aria-expanded="true" data-parent="#heading-panel-1" data-target=".collapse-panel-1" data-toggle="collapse" href="#details" role="button">Link text</a>
      1. The aria-controls and aria-expanded are needed for accessibility in that it allows for keyboard selection of the link text which will toggle the panel open or closed when activated.
      2. The data-target=".collapse-panel-1" attribute is a modified Bootstrap/CSS control that bypasses TeamDynamix's default settings as it will block most scripts and ID attributes seen in standard Bootstrap code.
      3. The role="button" is required to allow for the link to behave as a button.

Example set of panels

Select the title of each accordion panel in order to see its contents.

Please Note: If a panel is closed when saved, it will be closed when reading the article. If it is open, it will remain open when reading the article.

Select the title of each accordion panel in order to see its contents. There is an anchor link in Panel 3 that acts as a toggle to open the content in Panel 1. Check it out!

Special thanks

This work couldn't have been done without a special thank you to the University of Michigan's TDX Customization resources on their service portal and their mobile data architect, Gabriel Mongefranco.

Please refer to their resource for a deeper understanding as to how this works. Go Ducks! Go Blue!

Print Article