Hi, I followed these instructions
https://community.mybb.com/thread-139594.html
I have got them up and semi working. But it only displays the first category, the second and third categories don't work. Was hoping I could have some help, thanks in advance.
URL:
http://gamerztemple.com/
<div style="float:left;width: 74%;">
<div class="tab_1" id="forum_tabs">
<div class="forum_tab_links">
<span>
<a href="javascript:;" id="tab_1"><i class="fa fa-home"></i></a>
<a href="javascript:;" id="tab_2"><i class="fa fa-desktop"></i><span class="mobile-hide" style="margin: 3px;"> General</span></a>
<a href="javascript:;" id="tab_3"><i class="fa fa-code"></i><span class="mobile-hide" style="margin: 3px;"> Technology</span></a>
</span>
</div>
{$forums}
</div></div>
.tab_1 #tab_cat_20 {
display:block !important
}
.tab_2 #tab_cat_40 {
display:block !important
}
.tab_3 #tab_cat_41 {
display:block !important
}
EDIT: I've tried Tabbed Menu and MyTabs, but both plugins seem to give me the same issue pretty much.
(2016-11-12, 08:01 PM)Chucky. Wrote: [ -> ]Hi, I followed these instructions https://community.mybb.com/thread-139594.html
I have got them up and semi working. But it only displays the first category, the second and third categories don't work. Was hoping I could have some help, thanks in advance.
URL: http://gamerztemple.com/
<div style="float:left;width: 74%;">
<div class="tab_1" id="forum_tabs">
<div class="forum_tab_links">
<span>
<a href="javascript:;" id="tab_1"><i class="fa fa-home"></i></a>
<a href="javascript:;" id="tab_2"><i class="fa fa-desktop"></i><span class="mobile-hide" style="margin: 3px;"> General</span></a>
<a href="javascript:;" id="tab_3"><i class="fa fa-code"></i><span class="mobile-hide" style="margin: 3px;"> Technology</span></a>
</span>
</div>
{$forums}
</div></div>
.tab_1 #tab_cat_20 {
display:block !important
}
.tab_2 #tab_cat_40 {
display:block !important
}
.tab_3 #tab_cat_41 {
display:block !important
}
EDIT: I've tried Tabbed Menu and MyTabs, but both plugins seem to give me the same issue pretty much.
You could try:
Edit Template: forumbit_depth1_cat
Go to template forumbit_depth1_cat and add the div tag to cover all the template:
<div id="cat_{$forum['fid']}" class="tabbed_content">
....
</div>
meaning add this at the top:
<div id="cat_{$forum['fid']}" class="tabbed_content">
and add this at the bottom:
</div>
In Index Templates
Edit Template: index
find:
{$forums}
Add above:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_1, #cat_3" border="1px">Category 1 & 2</td>
<td class="tab_cat tab" title="" rel="cat_8, #cat_9" border="1px">Category 3 & 4</td>
<td class="tab_cat tab" title="" rel="cat_10, #cat_11" border="1px">Category 5 & 6</td>
<td class="tab_cat tab" title="" rel="cat_12, #cat_13" border="1px">Category 7 & 8</td>
</tr>
</table>
In global.css add:
/** Tabbed Category on index **/
#tabbed_content {
width: auto !important;
}
.tab_cat {
background: #EFEFEF !important;
cursor: pointer;
padding: 6px;
font-size: 12px;
border-top: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
border-right: 1px solid #D4D4D4;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
.tab_cat_border {
width: 80%;
padding-left: 20px;
}
.at {
background: #016DB1 url('images/thead_bg.png') top left repeat-x !important;
color: #FFF;
padding: 6px;
font-size: 12px;
border-top: 1px solid #0066A2;
border-left: 1px solid #0066A2
border-right: 1px solid #0066A2;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
/** Category 1 & 2 **/
#cat_1{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_3{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_8{
display: none;
}
#cat_9{
display: none;
}
/** Category 5 & 6 **/
#cat_10{
display: none;
}
#cat_11{
display: none;
}
/** Category 7 & 8 **/
#cat_12{
display: none;
}
#cat_13{
display: none;
}
* You must adjust to suit your specific cat_"number"s
Example:
![[Image: 2jakwhv.jpg]](https://camo.mybb.com/24601b1d5d1527ed587c339f96ff30ded3621956/687474703a2f2f6936362e74696e797069632e636f6d2f326a616b7768762e6a7067)
Hi, thank you for your response. I have tried what you said but it doesn't seem to work. It displays all categories on index rather than on each tab. You said that I had to put the correct category numbers in the code, the numbers are 20, 40 and 41. I have this in the CSS code for the categories:
/** Category 1 & 2 **/
#cat_20{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_40{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_41{
display: none;
}
And this is the index in between {$ps_header_index} and {$forums}
{$header}
{$ps_header_index}
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<div style="float:left;width: 74%;">
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_1, #cat_20" border="1px">Category 1 & 2 </td>
<td class=" tab_cat tab" title="" rel="cat_2, #cat_40" border="1px">Category 3 & 4</td>
<td class="tab_cat tab" title="" rel="cat_3, #cat_41" border="1px">Category 5 & 6</td>
<td class="tab_cat tab" title="" rel="cat_12, #cat_13" border="1px">Category 7 & 8</td>
</tr>
</table>
{$forums}
</div>
Please correct me if I've done something wrong, thanks again.
EDIT: I've also tried this:
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2 </td>
<td class=" tab_cat tab" title="" rel="cat_41, #cat_41" border="1px">Category 3 & 4</td>
I haven't a clue what I'm doing lol, it's been giving me havoc for days.
(2016-11-13, 02:56 PM)Chucky. Wrote: [ -> ] (2016-11-13, 02:29 PM)vintagedaddyo Wrote: [ -> ] (2016-11-12, 08:01 PM)Chucky. Wrote: [ -> ]Hi, I followed these instructions https://community.mybb.com/thread-139594.html
I have got them up and semi working. But it only displays the first category, the second and third categories don't work. Was hoping I could have some help, thanks in advance.
URL: http://gamerztemple.com/
<div style="float:left;width: 74%;">
<div class="tab_1" id="forum_tabs">
<div class="forum_tab_links">
<span>
<a href="javascript:;" id="tab_1"><i class="fa fa-home"></i></a>
<a href="javascript:;" id="tab_2"><i class="fa fa-desktop"></i><span class="mobile-hide" style="margin: 3px;"> General</span></a>
<a href="javascript:;" id="tab_3"><i class="fa fa-code"></i><span class="mobile-hide" style="margin: 3px;"> Technology</span></a>
</span>
</div>
{$forums}
</div></div>
.tab_1 #tab_cat_20 {
display:block !important
}
.tab_2 #tab_cat_40 {
display:block !important
}
.tab_3 #tab_cat_41 {
display:block !important
}
EDIT: I've tried Tabbed Menu and MyTabs, but both plugins seem to give me the same issue pretty much.
You could try:
In Index Templates "Index"
find:
{$forums}
Add above:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_1, #cat_3" border="1px">Category 1 & 2 </td>
<td class=" tab_cat tab" title="" rel="cat_8, #cat_9" border="1px">Category 3 & 4</td>
<td class="tab_cat tab" title="" rel="cat_10, #cat_11" border="1px">Category 5 & 6</td>
<td class="tab_cat tab" title="" rel="cat_12, #cat_13" border="1px">Category 7 & 8</td>
</tr>
</table>
In global.css add:
/** Tabbed Category on index **/
#tabbed_content {
width: auto !important;
}
.tab_cat {
background: #EFEFEF !important;
cursor: pointer;
padding: 6px;
font-size: 12px;
border-top: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
border-right: 1px solid #D4D4D4;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
.tab_cat_border {
width: 80%;
padding-left: 20px;
}
.at {
background: #016DB1 url('images/thead_bg.png') top left repeat-x !important;
color: #FFF;
padding: 6px;
font-size: 12px;
border-top: 1px solid #0066A2;
border-left: 1px solid #0066A2
border-right: 1px solid #0066A2;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
/** Category 1 & 2 **/
#cat_1{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_3{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_8{
display: none;
}
#cat_9{
display: none;
}
/** Category 5 & 6 **/
#cat_10{
display: none;
}
#cat_11{
display: none;
}
/** Category 7 & 8 **/
#cat_12{
display: none;
}
#cat_13{
display: none;
}
* You must adjust to suit your specific cat_"number"s
Example:
Hi, thank you for your response. I have tried what you said but it doesn't seem to work. It displays all categories on index rather than on each tab. You said that I had to put the correct category numbers in the code, the numbers are 20, 40 and 41. I have this lime the CSS code for the categories:
/** Category 1 & 2 **/
#cat_20{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_40{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_41{
display: none;
}
And this is the index inbetween {$ps_header_index} and and {$forums}
{$header}
{$ps_header_index}
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<div style="float:left;width: 74%;">
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_1, #cat_20" border="1px">Category 1 & 2 </td>
<td class=" tab_cat tab" title="" rel="cat_2, #cat_40" border="1px">Category 3 & 4</td>
<td class="tab_cat tab" title="" rel="cat_3, #cat_41" border="1px">Category 5 & 6</td>
<td class="tab_cat tab" title="" rel="cat_12, #cat_13" border="1px">Category 7 & 8</td>
</tr>
</table>
{$forums}
</div>
Please correct me if I've done something wrong, thanks again.
so lets say your first category is cat_20 and you second category is cat_40 then you would do this:
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2 </td>
That was the first tab and since we want to see those then we keep them visible by commenting out
/* Display: none; */ /* Because we want to see it up in here now don't we? */
/** Category 1 & 2 **/
#cat_20{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_40{
/* display: none; */ /* Off because we want to see this, up in here */
}
* and the next two cats in the next tab and so on and so forth..., hopefully that makes sense.
It is rally important to get your category numbers correct in the index and also hide the cts you do not want to see via css:
Example of adding second tab: * I obviously do not have forums in those categories yet thus it is merely showing you that the other tabs will call cats when set correctly
![[Image: 5lzacn.png]](https://camo.mybb.com/a27a9678990ae0fa959b1ffdb78dca47ceef1267/687474703a2f2f6936372e74696e797069632e636f6d2f356c7a61636e2e706e67)
Okay I've done as you said but it still displays all 3 categories on index, rather than 2 on the first tab and the third on the second tab.
/** Tabbed Category on index **/
#tabbed_content {
width: auto !important;
}
.tab_cat {
background: #EFEFEF !important;
cursor: pointer;
padding: 6px;
font-size: 12px;
border-top: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
border-right: 1px solid #D4D4D4;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
.tab_cat_border {
width: 80%;
padding-left: 20px;
}
.at {
background: #016DB1 url('images/thead_bg.png') top left repeat-x !important;
color: #FFF;
padding: 6px;
font-size: 12px;
border-top: 1px solid #0066A2;
border-left: 1px solid #0066A2
border-right: 1px solid #0066A2;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
padding-bottom: -8px;
}
/** Category 1 & 2 **/
#cat_20{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_40{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_41{
display: none;
}
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2 </td>
<td class="tab_cat at tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4 </td>
</tr>
</table>
(2016-11-13, 03:04 PM)Chucky. Wrote: [ -> ]Okay I've done as you said but it still displays all 3 categories on index, rather than 2 on the first tab and the third on the second tab.
/** Tabbed Category on index **/
#tabbed_content {
width: auto !important;
}
.tab_cat {
background: #EFEFEF !important;
cursor: pointer;
padding: 6px;
font-size: 12px;
border-top: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
border-right: 1px solid #D4D4D4;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
.tab_cat_border {
width: 80%;
padding-left: 20px;
}
.at {
background: #016DB1 url('images/thead_bg.png') top left repeat-x !important;
color: #FFF;
padding: 6px;
font-size: 12px;
border-top: 1px solid #0066A2;
border-left: 1px solid #0066A2
border-right: 1px solid #0066A2;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
padding-bottom: -8px;
}
/** Category 1 & 2 **/
#cat_20{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_40{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_41{
display: none;
}
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2 </td>
<td class="tab_cat at tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4 </td>
</tr>
</table>
You are calling ".at" twice....
<td class="tab_cat at tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
Change to:
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
This is fine because it is supposed to be calling ".at"
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2</td>
So it should be more like:
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2</td>
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
(2016-11-13, 03:13 PM)vintagedaddyo Wrote: [ -> ] (2016-11-13, 03:04 PM)Chucky. Wrote: [ -> ]Okay I've done as you said but it still displays all 3 categories on index, rather than 2 on the first tab and the third on the second tab.
/** Tabbed Category on index **/
#tabbed_content {
width: auto !important;
}
.tab_cat {
background: #EFEFEF !important;
cursor: pointer;
padding: 6px;
font-size: 12px;
border-top: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
border-right: 1px solid #D4D4D4;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
.tab_cat_border {
width: 80%;
padding-left: 20px;
}
.at {
background: #016DB1 url('images/thead_bg.png') top left repeat-x !important;
color: #FFF;
padding: 6px;
font-size: 12px;
border-top: 1px solid #0066A2;
border-left: 1px solid #0066A2
border-right: 1px solid #0066A2;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
padding-bottom: -8px;
}
/** Category 1 & 2 **/
#cat_20{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_40{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_41{
display: none;
}
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2 </td>
<td class="tab_cat at tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4 </td>
</tr>
</table>
You are calling ".at" twice....
<td class="tab_cat at tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
Change to:
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
This is fine because it is supposed to be calling ".at"
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2</td>
So it should be more like:
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2</td>
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
Thank you again for replying. I have left the CSS as is as I want the first two to display while the 3rd not to display until we click on the second tab:
/** Category 1 & 2 **/
#cat_20{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_40{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_41{
display: none;
}
I have also done as you suggested with the <table>
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2 </td>
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4 </td>
The second tabs colour has changed to white, but that's about it. For some reason it still displays all 3 on tab one and tab two isn't clickable.
(2016-11-13, 03:24 PM)Chucky. Wrote: [ -> ] (2016-11-13, 03:13 PM)vintagedaddyo Wrote: [ -> ] (2016-11-13, 03:04 PM)Chucky. Wrote: [ -> ]Okay I've done as you said but it still displays all 3 categories on index, rather than 2 on the first tab and the third on the second tab.
/** Tabbed Category on index **/
#tabbed_content {
width: auto !important;
}
.tab_cat {
background: #EFEFEF !important;
cursor: pointer;
padding: 6px;
font-size: 12px;
border-top: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
border-right: 1px solid #D4D4D4;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
.tab_cat_border {
width: 80%;
padding-left: 20px;
}
.at {
background: #016DB1 url('images/thead_bg.png') top left repeat-x !important;
color: #FFF;
padding: 6px;
font-size: 12px;
border-top: 1px solid #0066A2;
border-left: 1px solid #0066A2
border-right: 1px solid #0066A2;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
padding-bottom: -8px;
}
/** Category 1 & 2 **/
#cat_20{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_40{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_41{
display: none;
}
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2 </td>
<td class="tab_cat at tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4 </td>
</tr>
</table>
You are calling ".at" twice....
<td class="tab_cat at tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
Change to:
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
This is fine because it is supposed to be calling ".at"
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2</td>
So it should be more like:
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2</td>
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
Thank you again for replying. I have left the CSS as is as I want the first two to display while the 3rd not to display until we click on the second tab:
/** Category 1 & 2 **/
#cat_20{
/* display: none; */ /* Off because we want to see this, up in here*/
}
#cat_40{
/* display: none; */ /* Off because we want to see this, up in here */
}
/** Category 3 & 4 **/
#cat_41{
display: none;
}
I have also done as you suggested with the <table>
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2 </td>
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4 </td>
The second tabs colour has changed to white, but that's about it. For some reason it still displays all 3 on tab one and tab two isn't clickable.
I am just going off the cat numbers you supplied an guess on the remaining numbers as they all need to be filled correctly... but they should work fine if you get the numbers correctly similar to below:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_20, #cat_40" border="1px">Category 1 & 2</td>
<td class="tab_cat tab" title="" rel="cat_41, #cat_42" border="1px">Category 3 & 4</td>
<td class="tab_cat tab" title="" rel="cat_43, #cat_44" border="1px">Category 5 & 6</td>
<td class="tab_cat tab" title="" rel="cat_45, #cat_46" border="1px">Category 7 & 8</td>
</tr>
</table>
Also if the thead_bg.png is not displaying change it to your thead.png or whatever you use on your theme
/** Tabbed Category on index **/
#tabbed_content {
width: auto !important;
}
.tab_cat {
background: #EFEFEF !important;
cursor: pointer;
padding: 6px;
font-size: 12px;
border-top: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
border-right: 1px solid #D4D4D4;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
.tab_cat_border {
width: 80%;
padding-left: 20px;
}
.at {
background: #2E50B4 url('images/thead_bg.png') top left repeat-x !important;
color: #FFF;
padding: 6px;
font-size: 12px;
border-top: 1px solid #2E50B4;
border-left: 1px solid #2E50B4;
border-right: 1px solid #2E50B4;
border-bottom: 0;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
/** Category 1 & 2 **/
#cat_20{
}
#cat_40{
}
/** Category 3 & 4 **/
#cat_41{
display: none;
}
#cat_42{
display: none;
}
/** Category 5 & 6 **/
#cat_43{
display: none;
}
#cat_44{
display: none;
}
/** Category 7 & 8 **/
#cat_45{
display: none;
}
#cat_46{
display: none;
}
Didn't work haha, I think it's the theme as no plugins work for tabs and I've tried several hard coding methods
(2016-11-13, 03:32 PM)Chucky. Wrote: [ -> ]Didn't work haha, I think it's the theme as no plugins work for tabs and I've tried several hard coding methods
I am staring at my current theme with the exact code in it and it works fine, all screenshot examples are from a soon to be released theme that I am working on and currently giving you the exact code that is functioning perfectly with the correct usage of existing cat ids
Make sure to also do this:
Edit Template: forumbit_depth1_cat
Go to template forumbit_depth1_cat and add the div tag to cover all the template:
<div id="cat_{$forum['fid']}" class="tabbed_content">
....
</div>
meaning add this at the top:
<div id="cat_{$forum['fid']}" class="tabbed_content">
and add this at the bottom:
</div>