Skip to main content
Sign In

University Web Services (UWS)

University Web Services, University of Colorado Denver

 

 
 
 

Add Accordion Content

Foundation Widget Web Part for Accordions


​Related Links

An accordion pulls its content from a SharePoint list connected to it in the back end. Therefore, to develop content in an accordion, you need to develop the associated list.

  1. Navigate to the page with the accordion
  2. In Edit mode, at the bottom of the accordion web part, click Add/Edit Content
    The Accordion list opens.
    TIP: Each content item in the accordion on the front end is a list item in the back end.
    NOTE: If you have a title for the Accordion-Tabs web part on the web page, and you are logged in, you can click directly on the title without being in edit mode and get to the list on the back-end. The list, however, opens in the same window, so you have to navigate back to the page in another tab if you want to have both windows open while you edit.
  3. Click the title of an existing list item, and then click Edit Item in the ribbon
    The edit list item window opens in a new tab or window (depending on your browser settings)
    screenshot image - edit list item
  4. In the edit list item window, complete the list item details
    Title: add the text you want to appear when the item is collapsed in the accordion
    (for example, if the accordion is an FAQ, type the question in this field)
    Display: check to display the item in the accordion on the web page
    Order: type the order number in which you want this item to appear in the accordion
    Body: add the text you want to appear when the item is expanded in the accordion
    (for example, if the accordion is an FAQ, type the answer in this field)
  5. Repeat steps 3-4 until the existing default list items are used
    If you do not have additional content items to add, go to step 9
    If you do have additional content items to add, go to step 6
  6. Under the existing list items, click +Add new item, or click New Item in the ribbon
    The New Item window opens
    screenshot image - new item
  7. Complete the list item details
    Title: add the text you want to appear when the item is collapsed in the accordion
    (for example, if the accordion is an FAQ, type the question in this field)
    Display: check to display the item in the accordion on the web page
    Order: type the order number in which you want this item to appear in the accordion
    Body: add the text you want to appear when the item is expanded in the accordion
    (for example, if the accordion is an FAQ, type the answer in this field)
    TIP: The body field is a full HTML field in which you can insert links, images, etc.
  8. Repeat steps 6-7 until you have created list items for all the content you want to appear in the accordion
  9. Navigate back to the page with the accordion, and then click Check In to see the changes
University of Colorado Denver

© The Regents of the University of Colorado, a body corporate. All rights reserved.

All trademarks are registered property of the University. Used by permission only.