WiscWeb CMS - Accordion Panel Group Content Class

This document shows how to create the accordian panel groups for your web.

Accordion Panel Group

Accordion Panel Group
Accordion Panel Group Example

Accordion panels expand and collapse as the user clicks on the Panel item. One common use for accordion panels is Frequently Asked Question sections of web sites. The exmaple above is created in the CMS system with these three Content Classes, a TextArea and two Accordion Panel Groups:

Frequently Asked Questions <- Title for Panel Group; This is the TextArea that contains a single line in Header 2 formatting.
Content Classes <- 1st Accordion Panel Group, does not expand/collapse, with 2 items.
+ Embed YouTube Video (title): (content) <- Item 1 in 1st section
+ Embed Vimeo Video (title): (content) <- Item 2 in 1st section
Pages <- 2nd Accordion Panel Group, does not expand/collapse with 2 items.
+ Blank Page (title): (content) <- Item 1 in 2nd section
+ External Page (title): (content) <- Item 2 in 2nd section

A click on the + sign (or the triangle if you choose that icon) expands the collapsed item to display the its content. Thus, there are multiple components for Accordion Panels in WiscWebCMS: the main container (the Panel Group) and the items under them. You can 'stack' them so that multiple Panel Groups appear as a single thing. The example above, greatly simplified, is:

TextArea (for title)
1st Accordion Panel Group
2nd Accordion Panel Group

That is three Content Classes. You cannot create the content of an Accordion Panel item without first adding an Accordion Panel Group. Once that is done, you then select Manage Panel to add the expandable/collapsable items to it. Selecting Create and Connect while in Manage Panel automatically creates a Panel Group item. Note, however, that these items can contain things other than text. When created, they have their own Title, Text, and Content. Select to edit content will bring up a list of the kinds of content available; another Accordion Panel is not an option here, so no nesting can be done.

To set up the Accordion Panel Group on a page:

  1. Open the Page
    open page
  2. Click on Manage Center Blocks
    manage center blocks
  3. Click on Create and connect page
    create and connect page
  4. Select Accordian Panel Group from the List of Content Classes
    accordian panel
  5. Enter the Headline
  6. Click OK

You will then see a New Accordion Panel Group at the location you specified. As with many content classes there are configurable options for the Accordion Panel Group
accordion panel group configuration

  • Block title: What will be shown in the title of the Accordion Panel Group, [Default: "New Accordion Panels"].
  • Show title: [Default: Yes].
  • Icons: [Default: Triangle, or +- signs]
  • Collapsible: [Default: No, or Yes].
  • Manage Panels: Add Panel items to the Accordion Panel Group.

To modify these options:

  1. Click on the Red Dot next to Edit configuration
    edit configuration
  2. Type in your "Block Title"
  3. Select whether or not to show the title, if you want the first item automatically visible (that is expanded), what icons you want, and if you want all panels to be collapsible.
  4. Click OK

To add content items to the Accordion Panel do the following:

  1. With the Accordion Panel Group open, click on the Red Dot next to Manage Panels
    manage panels
  2. Click on Create and Connect Page. There is no list of pages or content classes listed as only an Accordion Panel item can go into an Accordion Panel Group. This is the part that collapses and expands!
    create and connect page
  3. Enter the headline and click OK
    edit headline news article
  4. The Accordion Panel Group display will be replaced and you will now see the new panel item
    accordion panel edit panel item configuration
  5. These three reddots are for:
    1. Panel Title - What's visible when the Panel item is collapsed
    2. Edit Panel Text - What's visible when the Panel item is expanded if a Content Class (see next) was not added to the Panel item
    3. Edit Panel Content - Add a Content Class other than text to the Panel item. This KB doc won't cover all of the possibilities for these extra Content Classes.
  6. Click on the Red Dot by New Panel to enter Panel item text, i.e., what's visible when the Panel item is collapsed
    panel new
  7. Click on the Red Dot next to Edit panel text to enter expanded Panel item text, i.e., what's seen when the Panel item is expanded (if only text)
  8. Add the content in the text editor that you would like displayed when the Panel item is expanded
    TEXT box
  9. Click OK

At this point, to add additional items to the panel you need to click on the Close Red Dot for the Accordion Panel Group, then click it a second time to make the Manage Panels Reddot visible for selection. The expand/collapse indicators immediately become active on adding a second Panel item. When you click on the Open Reddot to edit them you will then need to click on the expand/collapse icon to actually see the configuration options.

If you would like to rearrange the order of the Panel items:

  1. Open the Accordion Panel by clicking on the Red Dot next to the panel's name
    block title
  2. Click on Manage Panels
    manage panels
  3. Select Edit Page Order
    edit page order
  4. Select and Move the Pages up or down to achieve the order you would like. Click OK

An Accordion Panel Group, whether one or many, are Content Classes added to pages on your site. There are no special publishing options or steps you must take other than what you would do for any page on your site. They are a bit complicated, but certainly save on screen space.

Keywords:wiscweb cms standard templates accordion panels standard template add create use how to   Doc ID:25044
Owner:Matthew G.Group:WiscWeb CMS
Created:2012-07-06 10:06 CDTUpdated:2014-12-02 12:34 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  1   0