Tabs

  1. Locate the “tabs” block in the “2017 Design Master” > “shared blocks
  2. Right-click and copy the block. Move the copied block over to your own site directory, place it in your “xhtml” folder.
  3. You need to include the block on every page where you intend to use it. To accomplish this:
  4. Go to “Edit” > “Configure” in the top horizontal are.
  5. Scroll down to find five JavaScript regions you can load blocks onto.
  6. Click “Choose Block” on an empty path and link to the corresponding block from your site’s directory.
  7. In the WYSIWYG source code editor insert the following script:

    <div class="TabbedPanels" id="TabbedPanels1" style="width:90%">
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">
    <h3>Tab 1</h3>
    </li>
    <li class="TabbedPanelsTab tab2" tabindex="1">       
    <h3>Tab 2</h3>
    </li>       
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent" id="featurestory">
    <p>Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.</p>
    </div>
    <div class="TabbedPanelsContent tab2> 
    <p>Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.</p> <
    </div>
    </div>
    </div>
  8. By default the TabbedPanels class is set to 415px, but this can be overwritten using inline styling. Just name the tabs in the list items, and then place any content into the div's.

Example Tabs

  • Tab 1

  • Tab 2

Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.

Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.







To add more tabs to your widget (we recommend you use no more than four), do the following:

  1. copy an existing tab list item for each tab you want to create
  2. copy a content div for each extra tab you've created
  3. rename the new tab list items and the content divs so that when you click on the tab, the appropriate content div appears

When you add extra tabs to the widget you'll see the new tabs bump to another line. To fix this, you'll need to adjust the width of each of the tabs (the tabs are set to 415px wide by default) using inline CSS. Define and adjust the width of the tabs until each fits.