Skip to main content
Sign In

University Web Services (UWS)

University Web Services, University of Colorado Denver

 

 
 
 

Module 3: Tabs

Develop Tabs content


BackNext

The second step in creating tabs is to develop the content. You need to both add content to the tabs, and determine whether or not you want a title for the tabs on the web page.

To add content to tabs:

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)

    Open edit list item 

  4. Complete the list item details
    1. Title: add the text you want to appear as the tab title
    2. Display: check to display the item as a tab on the web page
    3. Order: type the order number in which you want this item to appear in the tabs
    4. 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

    The New Item window 

  7. Complete the list item details
    1. Title: add the text you want to appear as the tab title
    2. Display: check to display the item as a tab on the web page
    3. Order: type the order number in which you want this item to appear in the tabs
    4. 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
BackNext
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.