Instructions for adding a tabbed mantle (javascript tabs) to a page on retail (6

steps)

All code to be added is enclosed

in "<!-- ======================================= -->" (w/o quotes, of course)
-----------------------------------------------------------------------------------
------

1)
---
Make sure jquery is included in the head:

<!-- ======================================= -->

<script type="text/javascript" src="<!--##*V_BASE_DIR##--
>/scripts/jquery.js"></script>
<!-- ======================================= -->

2)
---
Include the following in the head.
OPTIONAL PARAMETERS (you may pass any and all or none of these):
a) DEFAULT_TAB_ID - if by default you want a tab selected other than
the first, set this parameter
b) TAB_COOKIE_NAME - if you want 'sticky' tabs (browser to remember
what tab user clicked last via cookies), set this parameter

<!-- ======================================= -->

<!--##IMPORT util/tabbedMantleInclude.template##-->
<!-- ======================================= -->

3)
---
Include the following in the head(if the $(document).ready block already exists,
then just put the import statement inside the existing one):

<!-- ======================================= -->

<script type="text/javascript">
$(document).ready(function(){
<!--##IMPORT util/mantleTabsIncludeOnReady.template##-->
});
</script>
<!-- ======================================= -->

4)
---
To customize the tab sizes, placement, and left background image, you may add the
following styles in the head to override and tweak as needed
(including this may not be necessary, depending on your needs):

<!-- ======================================= -->

<style type="text/css">
 /*
If you want your tabs to have 2 lines of text, change the
#mantle_tabs height to 48px,
and change the #manntle_tabs .mantle_tab a below it to padding:
9px 20px (you may also
want to set #mantle_tabs .mantle_tab height below that to 116px)
*/

#mantle .mantle3 {
/* set background image and position for the left image in the
mantle */
background:
url(/amer/images/retirement/tabbed_mantle/retirement_woman.png) 18px 0 no-repeat;
}

#mantle .mantle_content {
/*padding: 5px 10px 0 171px; same as left position of
#mantle_tabs (below) if you want it vertically aligned w/ header text above tabs */
}

#mantle_tabs {
/*left: 171px; same as left content padding (above) if you want
it vertically aligned w/ header text above tabs */
/*height: 48px; if you adjust this, you may need to adjust the
top/bottom padding for #mantle_tabs .mantle_tab a below */
}

#mantle_tabs .mantle_tab a, #mantle_tabs .mantle_tab_selected a {

/*padding: 9px 20px; */
}

#mantle_tabs .mantle_tab, #mantle_tabs .mantle_tab_selected {

/*width: 116px; add a width if you want all tabs to be the same
width */
}

</style>
<!-- ======================================= -->

5)
---
In the body, add the following html markup for the tabbed module, giving an ID to
each tab (tab1, tab2, and tab3 in the example below):

<!-- ============== BEGIN MANTLE ============== -->

<div id="mantle"><div class="mantle1"><div class="mantle2"><div
class="mantle3"><div class="mantle_content">

<div class="header1">Some Header Here</div>

Some sub-text here, blah, blah, blah.

<!-- ============== BEGIN MANTLE ============== -->

<div id="mantle"><div class="mantle1"><div class="mantle2"><div
class="mantle3"><div class="mantle_content">
 <div class="header1">Some Header Here</div>
Some sub-text here, blah, blah, blah...

<!-- begin mantle tabs -->

<table border="0" cellpadding="0" cellspacing="0" id="mantle_tabs"><tr>

<td id="tab1" class="mantle_tab first"><div class="mantle_tab1"><div

class="mantle_tab2"><div class="mantle_tab3"><div class="mantle_tab4"><div
class="mantle_tab5"><div class="mantle_tab6"><a href="#" onclick="return
false;">Tab 1<span
class="arrow">&nbsp;</span></a></div></div></div></div></div></div></td>

<td id="tab2" class="mantle_tab"><div class="mantle_tab1"><div

class="mantle_tab2"><div class="mantle_tab3"><div class="mantle_tab4"><div
class="mantle_tab5"><div class="mantle_tab6"><a href="#" onclick="return
false;">Tab 2 - More text<span
class="arrow">&nbsp;</span></a></div></div></div></div></div></div></td>

<td id="tab3" class="mantle_tab"><div class="mantle_tab1"><div

class="mantle_tab2"><div class="mantle_tab3"><div class="mantle_tab4"><div
class="mantle_tab5"><div class="mantle_tab6"><a href="#" onclick="return
false;">Tab 3<span
class="arrow">&nbsp;</span></a></div></div></div></div></div></div></td>

</tr></table>
<!-- end mantle tabs -->

</div></div></div></div></div>
<!-- ============== END MANTLE ============== -->

6)
---
Finally, in the body, add the tab contents, giving each content div an ID of the
corresponding tab ID + "Content". In the example below, we've done this by giving
the content divs IDs of "tab1Content, tab2Content, and tab3Content":

<!-- ============== BEGIN TAB CONTENT ============== -->

<!-- begin tab1 content -->

<div id="tab1Content">
This is the tab 1 content
</div>
<!-- end tab1 content -->

<!-- begin tab2 content -->

<div id="tab2Content">
This is the tab 2 content
</div>
<!-- end tab2 content -->

<!-- begin tab3 content -->

<div id="tab3Content">
This is the tab 3 content
</div>
<!-- end tab3 content -->

<!-- ============== END TAB CONTENT ============== -->