Skip to main content
Sign In

University Web Services (UWS)



Module 2: Accordion​s

Create accordion


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

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

Add an accordion

The first step in creating an accordion is to add the Accordion web part to a page.

To add an accordion:

  1. Navigate to the page in which you would like to add the accordion
  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


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

  4. In Categories, click the Widget folder

    You may need to scroll down to find the Widget folder


    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


    The Accordion-Tabs web part is added to the desired zone on your web page. An accordion is displayed by default.




     Item 1

    Content of item 1 here1

     Item 2

    Content of item 2 here2


    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.


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

Accredited by the Higher Learning Commission. All trademarks are registered property of the University. Used by permission only.