Accordion 2 Portlet

Please contact your Department Content Manager or the Site Administrator for approval if you would like to use an accordion portlet on your page.

How the Accordion 2 portlet works

We only use the Accordion 2 portlet, not the Accordion portlet.

The Accordion 2 portlet allows you to put a lot of information on one page without forcing users to scroll through a long page of information to find what they need. This works well for things like a list of programs or services.

Keep the following in mind if you are thinking about adding an accordion to your page:

  • Users cannot easily search the page for keywords because the information is all hidden in the accordion
  • Only one accordion space can be open at a time, so this won't work well if the visitor needs to reference information from different areas

Example of Accordion 2 portlet - not expanded

How to insert the Accordion 2 portlet

To add a new portlet for the accordion, turn on Design ModeIf you do not see the lower bar with portlets, make sure you click Enable drag & drop on the right side of the screen under the toolbar to expand the toolbar.

  • Click the Local Portlets tab at the bottom.
  • Select the Accordion 2 portlet.

How to add Accordion 2 portlet

Drag the portlet down to a content region in the page below. It should go beneath a regular Content portlet that gives some context to the information contained within the accordion.

After you add the portlet, you should see it on the page with the words "Click here to edit." Click the pencil to edit.

How to add content to the accordion

When you click the pencil, you'll be taken to another page to edit the content of the accordion.

You can add 10 sections to the accordion at a time. If you need to have more than 10 sections, you can add another accordion portlet and they will connect into one large accordion.

How to add content to the Accordion 2 portlet

  • Title  - The name of the section - this is the text that will appear when the accordion is collapsed
  • Content - The content that will appear when you click on that section of the accordion. This can include photos and videos.

Keep in mind the order of your content. You cannot easily re-order the sections. 

Once you've entered the information for each section, click Save Draft or Publish.

Example of Accordion 2 portlet - expanded