Code to add tabs on an extra phpbb page

[BlueCollar Mark]

Before we get started with my question, just a heads up my phpBB knowledge is about a 3-4/10.

I feel like I've been searching forever, I can't seem to find the code what will give you tabs on an extra page. like in the User Control Panel. This is what I'm looking for:



I want to be able to have tabs similar to the above on a customized page I'm adding to a phpBB3 forum of mine. So basically I want to make the above tabs but with different names. I've been searching around in php files that use the 'switch ( $mode )' and 'case' features, but I can't seem to pinpoint exactly what I need. Any ideas?


If you need to know what I plan to use it for I can try to explain, or if this is sufficient hopefully I can get an answer.

[Sniper_E]

See if this will help you get started...

In the ucp_header.html the tabs are written like this:

Code: Select all

<div id="tabs">
   <ul>
      <!-- BEGIN t_block1 -->
      <li <!-- IF t_block1.S_SELECTED -->class="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li>
      <!-- END t_block1 -->
   </ul>
</div>

For an example of how to write that in a page I used some of the header menu links here:

Code: Select all

      <div id="tabs">
            <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
         <ul class="leftside">
               <li<!-- IF SCRIPT_NAME == "ucp" --> class="activetab"<!-- ENDIF -->><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e"><span>{L_PROFILE}</span></a></li>
               <!-- IF S_DISPLAY_PM -->
               <li><a href="{U_PRIVATEMSGS}"><span>{PRIVATE_MESSAGE_INFO}</span></a></li>
               <!-- ENDIF -->
               <!-- IF S_DISPLAY_SEARCH -->
               <li<!-- IF SCRIPT_NAME == "search" --> class="activetab"<!-- ENDIF -->><a href="{U_SEARCH_SELF}"><span>{L_SEARCH_SELF}</span></a></li>
               <!-- ENDIF -->
               <!-- IF U_RESTORE_PERMISSIONS -->
               <li><a href="{U_RESTORE_PERMISSIONS}"><span>{L_RESTORE_PERMISSIONS}</a></span></li>
               <!-- ENDIF -->
         </ul>
            <!-- ENDIF -->
         <ul class="rightside">
            <li<!-- IF SCRIPT_NAME == "faq" --> class="activetab"<!-- ENDIF -->><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></a></li>
            <!-- IF not S_IS_BOT -->
               <!-- IF S_DISPLAY_MEMBERLIST -->
               <li<!-- IF SCRIPT_NAME == "memberlist" --> class="activetab"<!-- ENDIF -->><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a></li>
               <!-- ENDIF -->
               <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
               <li><a href="{U_REGISTER}"><span>{L_REGISTER}</span></a></li>
               <!-- ENDIF -->
               <li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><span>{L_LOGIN_LOGOUT}</span></a></li>
            <!-- ENDIF -->
         </ul>
      </div>

I'm not sure what IF statements you would use in your page to get the class="activetab" added,
but you can see a few examples of how you could get those added above.

You can see I removed the links from the header breadcrumb and put them in tabs below.

[Jaftica]

If I am not mistaking, there is a MOD for this on .com written by Ashley or Ashley_s. I have seen it in use on another board.

Ahh, just found it. http://www.phpbb.com/customise/db/mod/tabbed_profiles/

Hope this helps too. Sorry for butting in.

[BlueCollar Mark]

Great, you guys have given me some interesting code to play around with. I will tinker a bit and see what comes of it. I 'think' this is what I need. Thanks guys.

[ Post made via iPhone]

[BlueCollar Mark]

Thanks for all the help so far guys, I've made some progress! Here's what I have so far...

1 php file

trophycase.php

5 html files

trophycase_main.html
trophycase_nfl.html
trophycase_nhl.html
trophycase_mlb.html
trophycase_nba.html

The idea for my tabs is so that when you click on one of the tabs (5 tabs total: Main, NFL, NHL, MLB, NBA), you are sending a variable back to the php page for the 'case' function. This variable and case function will in turn load the template for the page the user is clicking on. Here is my coding for the trophycase.php file (I'm including the whole file but I believe the necessary info is just near the top):

Code: Select all

<?php
/**
*
* @package - phpBB3 UPS Easy Shop
* @version $Id: shop.php 247 2010-08-24 16:16:48Z femu $
* @copyright (c) 2010 Wuerzi - http://spieleresidenz.de and femu - http://die-muellers.org
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/shop/functions_shop.' . $phpEx);


// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup(array('mods/shop', 'mods/points'));


$mode = five;

   switch ($mode)
   {
         case 'one':
         
               // Load shop template
               $template->set_filenames(array(
               'body' => 'trophycase_nfl.html')
               );
         break;      
         

         
         case 'two':
         
               // Load shop template
               $template->set_filenames(array(
               'body' => 'trophycase_nhl.html')
               );
         break;
         
         
         
         case 'three':
         
               // Load shop template
               $template->set_filenames(array(
               'body' => 'trophycase_mlb.html')
               );
         break;

         
         
         case 'four':
         
               // Load shop template
               $template->set_filenames(array(
               'body' => 'trophycase_nba.html')
               );
         break;   

         
         
         default:
         
               // Load shop template
               $template->set_filenames(array(
               'body' => 'trophycase_main.html')
               );
         break;      
               
               
         
         
   }      
         
      //Here is where we combine our 'items' and 'items_user' tables together
      //and order the items based on the 'trophycase_order'
      
      $useridnumber = $user->data['user_id'];   
      $alliteminfo= array();  // All rows go in here
      $newquery=  mysql_query (   "   
                              SELECT    phpbb_shop_items_user.user,
                                    phpbb_shop_items_user.item,
                                    phpbb_shop_items.item,
                                    phpbb_shop_items.icon,
                                    phpbb_shop_items.trophycase_order
                              FROM phpbb_shop_items_user
                              INNER JOIN phpbb_shop_items
                              ON phpbb_shop_items_user.item = phpbb_shop_items.item
                              WHERE phpbb_shop_items_user.user = $useridnumber
                              ORDER BY trophycase_order ASC
                           "
                        );  // Execute
      while( $row= mysql_fetch_assoc( $newquery ) ) $alliteminfo[$row['trophycase_order']]= $row;  // Enumerate
      mysql_free_result( $newquery );  // Release
      

      $aForTemplate= array();
      for( $iItem= 0; $iItem< 25; $iItem++ )
         {
            if ($iItem != $alliteminfo[$iItem]['trophycase_order'])
               {
                  $aForTemplate['ICON'. $iItem]= '<a href="'. $phpbb_root_path. 'images/shop_icons/noicon.png'. $alliteminfo[$iItem]['icon']. '" onclick="window.open( this.href ); return false" title="'. $user-> lang['SHOP_HIGHSLIDE_CLICK']. '"><img src="'. $phpbb_root_path. 'images/shop_icons/noicon.png'. $alliteminfo[$iItem]['icon']. '" alt="'. $user-> lang['SHOP_HIGHSLIDE_CLICK']. '" /></a>';
               }
               
            else
               {
                  $aForTemplate['ICON'. $iItem]= '<a href="'. $phpbb_root_path. 'images/shop_icons/'. $alliteminfo[$iItem]['icon']. '" onclick="window.open( this.href ); return false" title="'. $user-> lang['SHOP_HIGHSLIDE_CLICK']. '"><img src="'. $phpbb_root_path. 'images/shop_icons/'. $alliteminfo[$iItem]['icon']. '" alt="'. $user-> lang['SHOP_HIGHSLIDE_CLICK']. '" /></a>';
               }
         
         }
      // Multiple values at once for the block "item_list"
      // Keep in mind that you're handing over an array which doesn't need to be built just here in place - it can be rendered earlier already with its keys and values
      $template-> assign_block_vars
      (
         'item_list'
      ,   $aForTemplate
      );
      
   
               
      
      
page_header($page_title);

page_footer();

?>

Here is where I get stuck. I have assigned all the tab links to read off of the trophycase.php page, but I'm unsure of how to set the variable so that when a tab link is clicked on, the html page changes the variable value on the php page. Here is the html coding for trophycase_main.php:

(just a heads up, I have been manually changing the variable in the php page for the 'case' function to see if my coding works so far, now that I know it works, my goal here is to find a way to change it by clicking on the tabs)

Code: Select all

<!-- INCLUDE overall_header.html -->




   <table width="85%" align="center" border="1">   
         
      <tr>
         <td align='center'>
         
            <div id="tabs">
               <ul>
                  <li<!-- IF SCRIPT_NAME == 'nfl' --> class="activetab"<!-- ENDIF -->><a href="{U_NFL}" title="{L_NFL_EXPLAIN}"><span>{L_NFL}</span></a></li>
                  <li<!-- IF SCRIPT_NAME == 'nhl' --> class="activetab"<!-- ENDIF -->><a href="{U_NHL}" title="{L_NHL_EXPLAIN}"><span>{L_NHL}</span></a></li>
                  <li<!-- IF SCRIPT_NAME == 'mlb' --> class="activetab"<!-- ENDIF -->><a href="{U_MLB}" title="{L_MLB_EXPLAIN}"><span>{L_MLB}</span></a></li>
                  <li<!-- IF SCRIPT_NAME == 'nba' --> class="activetab"<!-- ENDIF -->><a href="{U_NBA}" title="{L_NBA_EXPLAIN}"><span>{L_NBA}</span></a></li>
               </ul>
            </div>

         
         </td>
      </tr>
   
   </table>

   
<tr>
</tr>   


<table  cellspacing="0" border="1" width="85%" align="center" background="ffffff">
      <h2 align="center">{L_UCP_SHOP_TROPHYCASE_COLLECTION}</h2>
      <tbody>
      <!-- BEGIN item_list -->
      <!-- IF item_list.S_ROW_COUNT is even --><tr class="bg1"><!-- ELSE --><tr class="bg2"><!-- ENDIF -->
</table>
<table  cellspacing="0" border="1" width="85%" align="center" background="ffffff">
<tr>
<td align='center'>{item_list.ICON1}</td><td align='center'>{item_list.ICON1}</td>
</tr>
</table>
<table  cellspacing="0" border="1" width="85%" align="center" background="ffffff">
<tr>
<td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td>
</tr>
</table>
<table  cellspacing="0" border="1" width="85%" align="center" background="ffffff">
<tr>
<td align='center'>{item_list.ICON3}</td><td align='center'>{item_list.ICON3}</td><td align='center'>{item_list.ICON3}</td>
</tr>
</table>
<table  cellspacing="0" border="1" width="85%" align="center" background="ffffff">
<tr>
<td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td>
</tr>
</table>
<table  cellspacing="0" border="1" width="85%" align="center" background="ffffff">
<tr>
<td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td>
</tr>
</table>
<table  cellspacing="0" border="1" width="85%" align="center" background="ffffff">
<tr>
<td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td><td align='center'>{item_list.ICON2}</td>
</tr>



      <!-- BEGINELSE -->
      <tr>
         <td colspan="5">{L_SHOP_NO_ITEMS}</td>
      </tr>
      <!-- END item_list -->

      </tbody>
   </table>




<!-- IF PAGINATION -->
<div class="pagination">
   {TOTAL_USER_ITEMS}<!-- IF PAGE_NUMBER --><!-- IF PAGINATION --> &bull; <a href="#" onclick="jumpto(); return false;" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a> &bull; <span>{PAGINATION}</span><!-- ELSE --> &bull; {PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
</div>
<!-- ENDIF -->

</form>

<!-- INCLUDE overall_footer.html -->

I think I'm quite close to completing this project! Any help is really appreciated. I will continue to work on it as well,see if I can figure it out.

[BlueCollar Mark]

Essentially I'm trying to use the HTML page to pass a variable back to the PHP page.

I was looking at using an HTML form to accomplish this. Would there be an easier way? Or simply a different way?

[Sniper_E]

Jaftica showed you a link to a tabbed profile mod above. You should use her setup for this.

Copy the tabs.js file to your styles/prosilver/template/ directory that she uses in that mod of hers.

Code: Select all

/*
@package Tabbed Profiles
@version 1.0.0 "White Hawk"
@copyright (c) Ashley Shillabeer (http://plutohosting.net)
@copyright (c) Michael Cullum (http://unknownbliss.co.uk)
@license http://opensource.org/licenses/gpl-license.php GNU Public License
*/

function dE(n, s) { var e = document.getElementById(n); if (!s) { s = (e.style.display == '' || e.style.display == 'block') ? -1 : 1; } e.style.display = (s == 1) ? 'block' : 'none'; }
function subPanels(p) {
   var i, e, t;
   if (typeof(p) == 'string') { show_panel = p; }
   for (i = 0; i < panels.length; i++) {
      e = document.getElementById(panels[i]);
      t = document.getElementById(panels[i] + '-tab');
      if (e) {if (panels[i] == show_panel) {e.style.display = 'block';if (t) { t.className = 'activetab'; }} else {e.style.display = 'none';if (t) { t.className = ''; }}}
   }
}

Then,

Open styles/prosilver/template/overall_header.html

Find This may be a partial find and not the whole line.

Code: Select all

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Add after Add the following line(s) on a new blank line before the preceding line(s) of find.

Code: Select all

<script type="text/javascript" src="{T_TEMPLATE_PATH}/tabs.js"></script>

Aight, now I have no idea what you have in your trophycase.php so I can give you an example on how to set this up.
You need to put all of your .html files in one template to set it up this way. Let me show you what I did here.
Example: http://sniper_e.ifastnet.com/phpBB3/index.php - click on the Trophy Showcase tab.

Open language/en/common.php

Find This may be a partial find and not the whole line.

Code: Select all

   'TRACKED_PHP_ERROR'   => 'Tracked PHP errors: %s',

Add after Add the following line(s) on a new blank line before the preceding line(s) of find.

Code: Select all

   'TROPHYCASE'      => 'Trophy Showcase',

Then create a ./language/en/trophycase.php language file... like so:

Code: Select all

<?php
/**
*
* groups [English]
*
* @package language
* @version $Id$
* @copyright (c) 2005 phpBB Group
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/**
* DO NOT CHANGE
*/
if (!defined('IN_PHPBB'))
{
   exit;
}

if (empty($lang) || !is_array($lang))
{
   $lang = array();
}

// DEVELOPERS PLEASE NOTE
//
// All language files should use UTF-8 as their encoding and the files must not contain a BOM.
//
// Placeholders can now contain order information, e.g. instead of
// 'Page %s of %s' you can (and should) write 'Page %1$s of %2$s', this allows
// translators to re-order the output of data while ensuring it remains correct
//
// You do not need this where single placeholders are used, e.g. 'Message %d' is fine
// equally where a string contains only two placeholders which are used to wrap text
// in a url you again do not need to specify an order e.g., 'Click %sHERE%s' is fine

$lang = array_merge($lang, array(
   'MAIN_TITLE'      => 'Main Title',
   'NFL_TITLE'         => 'NFL Title',
   'NHL_TITLE'         => 'NHL Title',
   'MLB_TITLE'         => 'MLB Title',
   'NBA_TITLE'         => 'NBA Title',
));

?>

And you already have a ./trophycase.php file but I have no idea what you have in there... I'll show you how I set this up.

This example ./trophycase.php file is empty... but you should be able to get some ideas from the setup.

Code: Select all

<?php
/**
*
* @package phpBB3
* @version $Id$
* @copyright (c) 2005 phpBB Group
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/**
*/

/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/functions_display.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup('trophycase');

display_forums('', $config['load_moderators']);

// Output page
page_header($user->lang['TROPHYCASE']);

$template->set_filenames(array(
   'body' => 'trophycase_body.html')
);

page_footer();

?>

Then you need a styles/prosilver/template/trophycase_body.html with codes from all of your .html templates in it.

Code: Select all

<!-- INCLUDE overall_header.html -->

<script type="text/javascript">
<!--
   var panels = new Array('main-panel', 'nfl-panel', 'nhl-panel', 'mlb-panel', 'nba-panel');

//-->
</script>


<h2>{PAGE_TITLE}</h2>

<div id="tabs">
   <ul>
      <li class="activetab" id="main-panel-tab"><a name="main" href="#main" onclick="subPanels('main-panel'); return false;"><span>Main</span></a></li>
      
      <li class="" id="nfl-panel-tab"><a name="nfl" href="#nfl" onclick="subPanels('nfl-panel'); return false;"><span>NFL</span></a></li>
      
      <li class="" id="nhl-panel-tab"><a name="nhl" href="#nhl" onclick="subPanels('nhl-panel'); return false;"><span>NHL</span></a></li>
      
      <li class="" id="mlb-panel-tab"><a name="mlb" href="#mlb" onclick="subPanels('mlb-panel'); return false;"><span>MLB</span></a></li>
      
      <li class="" id="nba-panel-tab"><a name="nba" href="#nba" onclick="subPanels('nba-panel'); return false;"><span>NBA</span></a></li>
   </ul>
</div>

<form method="post" action="{S_PROFILE_ACTION}" id="viewprofile">
<div class="panel bg3" style="margin: auto;">
   <div class="inner" style="text-align: left;"><span class="corners-top"><span></span></span>
      <ul class="topiclist">
         <li class="header">
         <dl><dt></dt></dl>
         </li>
      </ul>

<div style="display: block;" class="panel" id="main-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_MAIN_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>Main Name1:</dt> <dd>Main Discription1</dd>
      <dt>Main Name2:</dt> <dd>Main Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_main.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div style="display: none;" class="panel" id="nfl-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_NFL_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>NFL Name1:</dt> <dd>NFL Discription1</dd>
      <dt>NFL Name2:</dt> <dd>NFL Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_nfl.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div style="display: none;" class="panel" id="nhl-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_NHL_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>NHL Name1:</dt> <dd>NHL Discription1</dd>
      <dt>NHL Name2:</dt> <dd>NHL Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_nhl.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div style="display: none;" class="panel" id="mlb-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_MLB_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>MLB Name1:</dt> <dd>MLB Discription1</dd>
      <dt>MLB Name2:</dt> <dd>MLB Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_mlb.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div style="display: none;" class="panel" id="nba-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_NBA_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>NBA Name1:</dt> <dd>NBA Discription1</dd>
      <dt>NBA Name2:</dt> <dd>NBA Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_nba.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

      <span class="corners-bottom"><span></span></span>
   </div>
</div>
</form>

<br />

<!-- INCLUDE overall_footer.html -->

This does not have everything in it that you need but it should get you going in the right direction. Hope that helps.

[BlueCollar Mark]

Sniper_E, you are the man!

What you just explained is way better than what I was thinking about. It's way cleaner, simpler, and looks great! Thanks a lot Sniper and Jaftica! I will add my elements into the code structure you gave me, when it's completed and my site is moved online I will show you guys the finished product.

Thanks again!

[BlueCollar Mark]

Thanks again for your input guys. I've implemented the code and it works great!

I started thinking (uh oh), and I was wondering if it's possible to use the code you helped me with to design a second set of tabs inside the first set of tabs. So I started tinkering around and this is what I got...


First, I added two extra panels to the Javascript 'var-panels', like so:

Code: Select all

<script type="text/javascript">
<!--
   var panels = new Array('main-panel', 'nfl-panel', 'nhl-panel', 'mlb-panel', 'nba-panel', 'one-panel', 'two-panel');

//-->
</script>


Then I simply added the tab code inside the 'main page' html, like this:

Code: Select all

<div id="tabs">
   <ul>
      <li class="activetab" id="one-panel-tab"><a name="one" href="#one" onclick="subPanels('one-panel'); return false;"><span>One</span></a></li>
     
      <li class="" id="two-panel-tab"><a name="two" href="#two" onclick="subPanels('two-panel'); return false;"><span>Two</span></a></li>

   </ul>
</div>


So the above are my edits, here's the full file if someone feels like testing it.

Code: Select all

<!-- INCLUDE overall_header.html -->

<script type="text/javascript">
<!--
   var panels = new Array('main-panel', 'nfl-panel', 'nhl-panel', 'mlb-panel', 'nba-panel', 'one-panel', 'two-panel');

//-->
</script>


<h2>{PAGE_TITLE}</h2>

<div id="tabs">
   <ul>
      <li class="activetab" id="main-panel-tab"><a name="main" href="#main" onclick="subPanels('main-panel'); return false;"><span>Main</span></a></li>
     
      <li class="" id="nfl-panel-tab"><a name="nfl" href="#nfl" onclick="subPanels('nfl-panel'); return false;"><span>NFL</span></a></li>
     
      <li class="" id="nhl-panel-tab"><a name="nhl" href="#nhl" onclick="subPanels('nhl-panel'); return false;"><span>NHL</span></a></li>
     
      <li class="" id="mlb-panel-tab"><a name="mlb" href="#mlb" onclick="subPanels('mlb-panel'); return false;"><span>MLB</span></a></li>
     
      <li class="" id="nba-panel-tab"><a name="nba" href="#nba" onclick="subPanels('nba-panel'); return false;"><span>NBA</span></a></li>
   </ul>
</div>

<form method="post" action="{S_PROFILE_ACTION}" id="viewprofile">
<div class="panel bg3" style="margin: auto;">
   <div class="inner" style="text-align: left;"><span class="corners-top"><span></span></span>
      <ul class="topiclist">
         <li class="header">
         <dl><dt></dt></dl>
         </li>
      </ul>

<div style="display: block;" class="panel" id="main-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   
   


<div id="tabs">
   <ul>
      <li class="activetab" id="one-panel-tab"><a name="one" href="#one" onclick="subPanels('one-panel'); return false;"><span>One</span></a></li>
     
      <li class="" id="two-panel-tab"><a name="two" href="#two" onclick="subPanels('two-panel'); return false;"><span>Two</span></a></li>

   </ul>
</div>
   
   
   <h3>{L_MAIN_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>Main Name1:</dt> <dd>Main Discription1</dd>
      <dt>Main Name2:</dt> <dd>Main Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_main.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div style="display: none;" class="panel" id="nfl-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_NFL_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>NFL Name1:</dt> <dd>NFL Discription1</dd>
      <dt>NFL Name2:</dt> <dd>NFL Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_nfl.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div style="display: none;" class="panel" id="nhl-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_NHL_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>NHL Name1:</dt> <dd>NHL Discription1</dd>
      <dt>NHL Name2:</dt> <dd>NHL Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_nhl.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div style="display: none;" class="panel" id="mlb-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_MLB_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>MLB Name1:</dt> <dd>MLB Discription1</dd>
      <dt>MLB Name2:</dt> <dd>MLB Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_mlb.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div style="display: none;" class="panel" id="nba-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_NBA_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>NBA Name1:</dt> <dd>NBA Discription1</dd>
      <dt>NBA Name2:</dt> <dd>NBA Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_nba.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>

      <span class="corners-bottom"><span></span></span>
   </div>
</div>
</form>

<br />

<!-- INCLUDE overall_footer.html -->


In short, it did give me the appearance of two tabs inside the 'Main' tab. But it's non-functional. And clicking on a tab results in a page refresh with no default tab selected or displayed. I was hoping that adding tabs inside another set of tabs would be easy, but I'm thinking it's going to take a little more knowledge that what I currently have.

Tabs before clicking 'One' or 'Two'




Tabs after clicking 'One' or 'Two'


If I was to guess the problem, my guess would be that I may need a second javascript field to designate a second set of tabs. I will look into this. Never had to deal with Javascript before, so this is a great learning experience for sure. Any comments are appreciated. I'll be reading up on Javascript and looking into the Tabbed Profiles mod a little more.

[BlueCollar Mark]

I'm so close XD

Ok so I have the template set right I think, but I believe the Javascript needs to be altered, perhaps to account for a second variable (which would be the second set of tabs). Sniper (or anyone who knows more than me), would you mind trying out the code I'm posting? I am soooo close! It's a little frustrating but I think I'll get it soon I'm almost certain it's a Javascript issue now.

Code: Select all

<!-- INCLUDE overall_header.html -->

<script type="text/javascript">
<!--
   var panels = new Array('main-panel', 'nfl-panel');
//-->
</script>


<h2>{PAGE_TITLE}</h2>

<div id="tabs">
   <ul>
      <li class="activetab" id="main-panel-tab"><a name="main" href="#main" onclick="subPanels('main-panel'); return false;"><span>Main</span></a></li>
     
      <li class="" id="nfl-panel-tab"><a name="nfl" href="#nfl" onclick="subPanels('nfl-panel'); return false;"><span>NFL</span></a></li>
   </ul>
</div>

<form method="post" action="{S_PROFILE_ACTION}" id="viewprofile">
<div class="panel bg3" style="margin: auto;">
   <div class="inner" style="text-align: left;"><span class="corners-top"><span></span></span>
      <ul class="topiclist">
         <li class="header">
         <dl><dt></dt></dl>
         </li>
      </ul>

      <div style="display: block;" class="panel" id="main-panel">
      <div class="inner"><span class="corners-top"><span></span></span>
      <h3>{L_MAIN_TITLE}</h3>
      
      
      <script type="text/javascript">
      <!--
      var panels = new Array('nhl-panel', 'nba-panel');
      //-->
      </script>


      <h2>{PAGE_TITLE}</h2>

      <div align="center" id="tabs">
         <ul align="center">
           <li align="center" class="activetab" id="nhl-panel-tab"><a name="main" href="#nhl" onclick="subPanels('nhl-panel'); return false;"><span>NHL</span></a></li>
          
           <li align="center" class="" id="nba-panel-tab"><a name="nba" href="#nba" onclick="subPanels('nba-panel'); return false;"><span>NBA</span></a></li>
         </ul>
      </div>

      <form method="post" action="{S_PROFILE_ACTION}" id="viewprofile">
      <div class="panel bg3" style="margin: auto;">
         <div class="inner" style="text-align: left;"><span class="corners-top"><span></span></span>
           <ul class="topiclist">
             <li class="header">
             <dl><dt></dt></dl>
             </li>
           </ul>

      <div align="center" style="display: block;" class="panel" id="nhl-panel">
         <div class="inner"><span class="corners-top"><span></span></span>
         <h3>{L_NHL_TITLE}</h3>
         <dl class="left-box detailsprof" style="width: 80%;">
           <dt>NHL Name1:</dt> <dd>NHL Discription1</dd>
           <dt>NHL Name2:</dt> <dd>NHL Discription2</dd>
           <dt></dt> <dd><b>Everything from your trophycase_nhl.html template goes in here.</b></dd>
         </dl>
         <span class="corners-bottom"><span></span></span></div>
      </div>

      <div align="center" style="display: none;" class="panel" id="nba-panel">
         <div class="inner"><span class="corners-top"><span></span></span>
         <h3>{L_NBA_TITLE}</h3>
         <dl class="left-box detailsprof" style="width: 80%;">
           <dt>NBA Name1:</dt> <dd>NBA Description1</dd>
           <dt>NBA Name2:</dt> <dd>NBA Discription2</dd>
           <dt></dt> <dd><b>Everything from your trophycase_nba.html template goes in here.</b></dd>
         </dl>
         <span class="corners-bottom"><span></span></span></div>
      </div>


           <span class="corners-bottom"><span></span></span>
         </div>
      </div>
      </form>

      <br />
         <span class="corners-bottom"><span></span></span></div>
      </div>

<div style="display: none;" class="panel" id="nfl-panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <h3>{L_NFL_TITLE}</h3>
   <dl class="left-box detailsprof" style="width: 80%;">
      <dt>NFL Name1:</dt> <dd>NFL Discription1</dd>
      <dt>NFL Name2:</dt> <dd>NFL Discription2</dd>
      <dt></dt> <dd><b>Everything from your trophycase_nfl.html template goes in here.</b></dd>
   </dl>
   <span class="corners-bottom"><span></span></span></div>
</div>


      <span class="corners-bottom"><span></span></span>
   </div>
</div>
</form>

<br />

<!-- INCLUDE overall_footer.html -->