Accordion Content

Accordions are useful in dividing up sections of lengthy content on a page. For example, a checklist could be organized into accordion tabs like this:

financial aid accordion tabs screenshot


Adding Accordions

  • Go to the Accordion Content tab and check the "Include accordion content on page" box.
  • Blank fields for the first accordion Label and Body will appear.
  • The Body of each accordion tab works just like the Body field on the Basic tab.
  • Click the Add Another Item button to create the next accordion tab. 

accordion tab screenshot

Tip: Try to avoid adding images within an accordion tab, as the formatting can be unpredictable, and the system will occasionally freeze up. If you must add an image, enter all your text first, save the page, and then go back and add your image.


Re-ordering Accordions

  • Click the drag icon to the left of the Body field of the accordion tab you want to move.
  • Drag the box around to place it where you want it.
  • Be sure to click Save at the bottom of the page.

Removing Accordions

To remove an accordion tab, click the Remove button below the Body field of the accordion tab you want to remove. To remove all accordions on a page, you can remove each tab this way, or you can simply uncheck the "Include accordion content on page" box.


Advanced Options

Sometimes you may need to link to a specific accordion tab on a page.

To link to a specific section within an accordion so that it is expanded when a user arrives to that page, add #title-of-accordion to the end of the URL you are linking to. For example, if the URL is https://www.unca.edu/facts-and-figures, and the content you are referencing is under the Campus Life accordion tab, the URL you would use is https://www.unca.edu/facts-and-figures#campus-life. You do not have to use any additional html.

Note: Each word of the accordion title following the # must be lowercase and separated by a dash. Do not include apostrophes; i.e. the title A Student’s Course Load should look like this: #a-students-course-load.