Adding an Accordion Page

An Accordion Page stacks a list of items vertically one of top of the others. By clicking an item heading you can expand the item to display the content associated with that item. You can expand one item at a time: opening one item closes another.

About this task

Default content
When you create an Accordion Page, new Components are created for you containing dummy content. You can edit or replace the content. By default, the following items are included in the layout:
  • a main article Component
  • a content list Component that displays two items
Ordering of content
The Components are displayed in the Accordion in the order they are specified in the Component.

Procedure

  1. Open your Web site in Experience Manager.
  2. In the Home tab of the Ribbon toolbar, New Page > Accordion Page.
  3. Specify the following properties:
    • Page Title—enter the internal name of the Page
    • File Name—enter the name of the Page as it appears in the browser address bar
    • Page Location—accept the default, or click Change and select the section of the Web site you want the Page to appear in.
    • Folders for Components—if you want to store the default Components containing dummy content that are created when you create a Section Page in a different location, click Configure Folders for Components, select a new Folder and click Apply to confirm your choice.
  4. Click Create Page.
    A new Accordion Page is created.
  5. Change the main article page inline:
    1. Change the image—browse to and select a new background image
    2. Change the text—enter body text, subheading and content
    3. Add media—add additional multimedia and captions
  6. Click Show Properties in the top right corner of the Component and in the Metadata section, click Edit. Modify the following properties:
    • Metadata Description—used in search engines
    • Short Title—used in navigation
    • Intro Text—used as summary text
  7. Add content items:
    1. Click Open in Form View.
    2. Click the plus sign to add an item.
    3. Enter a Subheading to define the text that appears in the tab.
    4. Enter Content for the main body text that appears when you expand the tab (a Format Area containing the formatted text).
    5. Click the Media option and browse to and select a Multimedia Component link that points to a multimedia item that appears if you expand the tab
    6. Change the Link to define an internal or external link with link text that appears if you expand the tab
    7. Click Publish and select the Target Type that Publishes to your Staging Web site.
    8. Click Save and Close.
  8. Reorder items (items are displayed in order they are specified in the Component):
    1. Click Open in Form View.
    2. Drag the item to a new location.
    3. Click Publish and select the Target Type that Publishes to your Staging Web site.
    4. Click Save and Close.
  9. Remove items:
    1. Click Open in Form View.
    2. Click the delete icon next to an item.
    3. Click Publish and select the Target Type that Publishes to your Staging Web site.
    4. Click Save and Close.