Skip to main content
Sign In

University Web Services (UWS)

University Web Services, University of Colorado Denver

 

 
 
 

Add Tabs Content

Foundation Widget Web Part for Tabs


​Related Links


Tabs pull content from a SharePoint list connected to the web part in the back end. Therefore, to develop content in tabs, you need to develop the associated list.
  1. Navigate to the page with the tabs
  2. In Edit mode, at the bottom of the tabs web part, click Add/Edit Content
    The Tabs list opens.
    TIP: Each tab 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. Complete the list item details
    Title: add the text you want to appear as the tab title
    Display: check to display the item as a tab on the web page
    Order: type the order number in which you want this item to appear in the tabs
    Body: add the text you want to appear when the tab is selected
  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 as the tab title
    Display: check to display the item as a tab on the web page
    Order: type the order number in which you want this item to appear in the tabs
    Body: add the text you want to appear when the tab is selected
    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 tabs
  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.