Skip to main content
Sign In

University Web Services (UWS)

University Web Services, University of Colorado Denver

 

 
 
 

Module 3: Tabs

Create tabs


BackNext

Creating tabs on your web page is a 2-step process, including the following tasks:

  • Adding the tabs web part to a web page
  • Developing the tabs content
    • Edit or hide tabs title
    • Add content items

Add tabs

The first step in creating tabs is to add the tabs web part to a page.

To add tabs:

  1. Navigate to the page in which you would like to add the tabs
  2. In the Page tab, Edit group, click Edit
  3. In the desired zone, click Add a Web Part

    The Browse tab will open at the top of your window with web part options

    Tip

    You can also add tabs to the Page Content zone. In the Editing Tools menu, Insert tab, click Web Part

  4. In Categories, click the Widget folder
    Tip

    You may need to scroll down to find the Widget folder

    Note

    The Lists and Libraries folder is highlighted by default, so you will see any existing Accordion-Tabs lists in the Web Parts group. Do not select the list, scroll down to the Widget folder.

  5. In Web Parts, click Accordion-Tabs

    Accordion tabs under Widget categories 

  6. In About the Web Part, ensure the desired zone is selected after Add Web Part to, and then click Add

    Mod_2_Zone_1_Add 

    The Accordion-Tabs web part is added to the desired zone on your web page.

    An accordion is displayed by default.

  7. Hover over the right side of the blue box in the web part, click the down arrow, and then click Edit Web Part

    Edit Web Part 

    Tip

    The web part menu is always available via this drop-down menu, but the arrow is hidden. Whenever you want to edit a web part, you must hover over the upper, right side of the web part to make the arrow appear.

    The web part properties display in a box at the upper right of your window.

    Note

    You may need to scroll over and up to see the web part properties.

  8. Next to Display Options, click the down arrow, and then click Tabs-Horizontal

    Click Tabs-Horizontal under Disply option 

  9. At the bottom of the web part properties window, click Apply

    The web part changes from an accordion to tabs

     

     Accordion

     

     Item 1

    To add content to the Accordion items, click on the 'Add Content' link.

    For more help, refer to the help selection.

    1

     Item 2

    Content of item 2 here2


     

    Note

    SharePoint has also built a list in the back-end for your accordion, which is where you develop and manage the content for your accordion.

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.