Using Tab Products Pro... on an EZpage?

[Feznizzle]

Awesome as always, thanks DrB!!!

For anybody else who wants to use TPP on EZpages, Category pages, etc... it can be done!

NOTE: You have to have a modest understanding of html in order to do this.

Ok, so here is how you can do can make TPP universally available on any page you create (this assumes you already have TPP correctly installed on your site):

1. Backup your site files!
2. To make the TPP jscript universally available, find the js file (/includes/modules/pages/product_info/jscript_tpp.js) and drop a copy into your template js folder (/includes/templates/YOUR_TEMPLATE/jscript/).
3. To make the TPP css universally available, find the css file (/includes/templates/YOUR_TEMPLATE/css/product_info.css) and copy/paste (move) the content of that file (actually, just the "@import ('tpp/alt_xxxx.css')" line) into the top of your site's main css file (/includes/templates/YOUR_TEMPLATE/css/stylesheet.css).
4. Now you can go remove the unneeded js files:

• /includes/modules/pages/document_general_info/jscript_tpp.js
• /includes/modules/pages/document_product_info/jscript_tpp.js
• /includes/modules/pages/product_free_shipping_info/jscript_tpp.js
• /includes/modules/pages/product_info/jscript_tpp.js
• /includes/modules/pages/product_music_info/jscript_tpp.js

Now that you have the js and css is available, you can use tabs anywhere using some simple html. I'd suggest creating an EZpage to experiment with. Once you've created a page, here is a basic html frame you can fiddle around with to figure out how it works:

<div id="slidetabsmenu" style="display: block;">
<ul>
    <li><a class="current" href="javascript:void(0)" onclick="expandcontent('sc1', this)"><span>Dis Da Tab</span></a></li>
    <li><a href="javascript:void(0)" onclick="expandcontent('sc2', this)"><span>Dis Da Uda Tab</span></a></li>
    <li><a href="javascript:void(0)" onclick="expandcontent('sc3', this)"><span>Dis Dat and Da Uda</span></a></li>
</ul>
</div>

<p>&nbsp;</p>

<div id="tabcontentcontainer">
<div class="tabcontent" id="sc1" style="display: block;">
<p>Put some html in here!!!!</p>
</div>
<!--end sc1-->

<div class="tabcontent" id="sc2" style="display: none;">
<p>Put some more content here, bro!</p>
</div>
<!--end sc2-->

<div class="tabcontent" id="sc3" style="display: none;">
<p>Now put some more awesomeness right here!!!!</p>
</div>
<!--end sc3-->

</div>

Hope this helps somebody!