Skip Ribbon Commands
Skip to main content
Navigate Up
Sign In

Tabbed Navigation

Article ID: ITSKB-3-203

Article Purpose

This is an advanced CMS topic for CMS authors with HTML access. All other authors can request assistance from the ITS Web Apps team in setting up the JQuery tabbed navigation.

In this article we will create a JQuery tabbed navigation with three tabs with seperate content areas.

 

Needed Materials

Steps to Resolution

Option 1 - Modify example code in CMS

  1. Log in and Work on a CMS page
  2. Click the "Gear Icon" for the formatted text block that you want the tabbed nagigation to appear.
  3. Click "Text"
  4. This brings up the "Formatted Text Block" dialog
    1. "Copy" the example code from the addition information section of this article
    2. Click the "Show/Hide HTML" icon in the CMS Rich Text Editor
    3. "Paste" in the example code provided
    4. "Modify" the HTML code for your tabbed navigation. Make sure not to delete any of the divs.
    5. You can change the color of the tabbed navigation by using the following options
      • UAA Green Option - class="js-tabs-uaagreen"
      • UAA Gold Option - class="js-tabs-uaagold"
  5. Click "Save"
  6. "Submit" your page/element when you are finished

Now when you preview your page you will see a formatted text block that has the tabbed navigation.

Option 2 - Modify example code in code editor

  1. "Copy" the example code from the addition information section of this article
  2. "Modify" the HTML code for your Frequently Asked Questions in your editor of choice such as Dreamweaver, Notepad++, Brackets, or plain old notepad/text edit
    • Navigation Items are an unordered list with links to content anchor tags
    • Content Areas are formatted appropriately then wrapped in a containing <div id="anchor-name">
    • Wrap the entire Tabbed Menu with a containing <div class="color option">
    • You can change the color of the tabbed menu by using the following options
      • UAA Green Option- class="js-tabs-uaagreen"
      • UAA Gold Option - class="js-tabs-uaagold"
  3. Log in and Work on a CMS page
  4. Click the "Gear Icon" for the formatted text block that you want the accordion drop-down to appear.
  5. Click "Text"
  6. This brings up the "Formatted Text Block" dialog
    1. Click the "Show/Hide HTML" icon in the CMS Rich Text Editor
    2. "Paste" in the example code that you modified in your code editor
  7. Click "Save"
  8. "Submit" your page/element when you are finished

Now when you preview your page you will see a formatted text block that has the tabbed navigation.

Additional Information

​Example code for JQuery tabbed navigation in the CommonSpot Content Management System

 

<div class="js-tabs-uaagreen">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>

Did this article answer your question?

Related Reading

 

For additional assistance Contact the IT Call Center at 786-4646.