[Tutorial] Tabbed forum with jQuery (multi categories in one tab)

[AmazOuz]

This  mod was written by nhtera888xxx and modified by Joey_Pham from <snip>
This is a handicraft template modification to help you to make the tabs for your categories, let's begin:

First of all, you have to download the attachment below, then unzip and upload it into jscript folder.

Step 1:
Go to template forumbit_depth1_cat and add the div tag to cover all the template:

Code:

<div id="cat_{$forum['fid']}" class="content">
....
</div>

Step 2:
Go to template index and find:

Code:

{$forum}

Then add above it:

Code:

<script type="text/javascript" src="jscripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat at tab" title="Category 1" style="cursor: pointer;" rel="cat_1">Category 1</td>
<td class="tcat tab" title="Category 4 &amp; 6" style="cursor: pointer;" rel="cat_4, #cat_6">Category 4 &amp; 6</td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11">Category 9</td>
</tr>
</table>

Notice:
The "cat_1", "cat_4", "cat_6", "cat_9", "cat_11" were taken from the div code from step 1 above:

Code:

"cat_{$forum['fid']}"

And the numbers 1,4,6,9,11 are the ID of the categories that you want you make tab.

Those cat_1, cat_4, cat_9 will be the main tabs that show on the index page.

The #cat_6 will be the category that stay in the same tabs with the cat_4, like how it looks above,
and the #cat_11 will be the category that stay in the same tabs with the cat_9.
=> Dont forget the # for the sub categories, if you forget, then they wont show after the main categories.

You kind of get the idea, right?


Then add these CSS code to global.css:

Code:

.at {
    background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
    color: #ffffff;
}

#cat_4{
display: none;
}

#cat_6{
display: none;
}

#cat_9{
display: none;
}

#cat_11{
display: none;
}

(and goes on)

Notice: We will hide all the tabs (not really hide) except the first tab or the tab that you want to be the main tab.
For example, from the code above, it will shows the cat_1 and hide the the rest of them.

If you want to show or change another tab, just add the cat_1 and delete the css of the tab you want to show.
EX: Now I want to show the cat_4, then I'll have this code for my CSS:

Code:

.at {
    background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
    color: #ffffff;
}

#cat_1{
display: none;
}

#cat_6{
display: none;
}

#cat_9{
display: none;
}

#cat_11{
display: none;
}

P/S: Remember, you just can choose 1 of the main tabs' css to make it visible.
Like here, I just can choose for cat_1, cat_4, or cat_9, because they are the main tabs I've choose before.

and then I'll change the code from template index from this:

Code:

<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat at tab" title="Category 1" style="cursor: pointer;" rel="cat_1">Category 1</td>
<td class="tcat tab" title="Category 4 &amp; 6" style="cursor: pointer;" rel="cat_4, #cat_6">Category 4 &amp; 6</td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11">Category 9</td>
</tr>
</table>

To this:

Code:

<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat tab" title="Category 1" style="cursor: pointer;" rel="cat_1">Category 1</td>
<td class="tcat at tab" title="Category 4 &amp; 6" style="cursor: pointer;" rel="cat_4, #cat_6">Category 4 &amp; 6</td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11">Category 9</td>
</tr>
</table>

That's all.

Hope this modification will be helpful for you.

Source : https://community.mybb.com/thread-62039.html