WiscWeb - WordPress UW Theme - Accordion Panel Page Element

This document explains how to add a Accordion Panel to your pages.


Accordion Panels allow you to have a series of editable text blocks for you to add to your site. Each panel expands and contracts to allow you to display a lot of information that stays hidden unless a person selects a panel. You can add text, media, or embed third party code (e.g. YouTube) to display in your accordion panels.

Accordion panel example

Layout Availability

Accordion Panels are available in One and Two Column Content Layouts.

Best Practices

Adding an Accordion Panel

  1. Navigate to the page on which you want to add an Accordion Panel.

  2. Scroll to the Primary Content Area and the Layout on which you want to add an Accordion Panel.

  3. At the bottom of that Layout, click on Add Page Element.

  4. On the Page Element list, click on Accordion Panel.

Using an Accordion Panel

Accordion Panels have two fields for you to fill out, the title and the text area. The title will appear at the top of the panel and displays when it is open or closed. The text block appears beneath the title and functions the same as the Text Block Page Element. For all of the options available in the Text Block, see WiscWeb - WordPress UW Theme - Text Block Page Element.

default accordion panel screen in wordpress

Adding and Rearranging Panels

There are two ways to add new panels.

plus and minus symbols appearing in the accordion area

You can also rearrange the panels after you've added them. To do this, mouse over the left column and you'll see numbers appear. These numbers coincide with the order of the panels as they appear on the page. Click and drag the panels to where you want them to appear. For example, if you want the third panel to appear second, navigate to the third panel, click and drag in the left column to above the second panel, and release the mouse. This should move the panel from third to second, and the second panel should now be third.

display of the number column which can be dragged to a new order

Demonstration Video (no audio)

See Also: