Today we will learn how to add MyBB's collapse buttons to any table. Interesting? Well, its easy too.
Lets see how it can be done.
The default table code structure of MyBB is something like this:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>Title of the Table</strong></td>
</tr>
<tr>
<td class="trow1"> The first content row. </td>
</tr>
<tr>
<td class="trow2"> The second content row. </td>
</tr>
</table>
Now we will insert the collapse button code to show in title bar (.thead). Code for this is:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['unique_id']}.gif" id="unique_id_img" class="expander" alt="[-]" title="[-]" /></div>
Note that:
1. The red text part ID of the collapse button must be unique and not be repeated.
2. The ID must have the word "_img" at the end of it.
As we want to show the collapse button in out title bar, we will place the code Just after the title, within the thead class.
<td class="thead"><strong>Title of the Table</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['unique_id']}.gif" id="unique_id_img" class="expander" alt="[-]" title="[-]" /></div>
</td>
Now we will bind the area with tbody reffering the same red unique text and instead of '_img' we have to place '_e' now.
<tbody style="{$collapsed['unique_id_e']}" id="unique_id_e">
Content to collapse ...
</tbody>
So, we will combine the code this way, its colored, explanatory:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>Title of the Table</strong>
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['unique_id']}.gif" id="unique_id_img" class="expander" alt="[-]" title="[-]" /></div>
</td>
</tr>
<tbody style="{$collapsed['unique_id_e']}" id="unique_id_e">
<tr>
<td class="trow1"> The first content row. </td>
</tr>
<tr>
<td class="trow2"> The second content row. </td>
</tr>
</tbody>
</table>
>> Blue text is newly added code.
>> Red is the unique ID, don't repeat the ID if you are applying it in multiple tables, else : you will click to collapse in earth and the content will collapse in Jupiter
![[Image: 8gppzg0.png]](https://camo.mybb.com/5a05404e805e9d287a9d2e77b8f28bd401e69ddb/687474703a2f2f692e696d6775722e636f6d2f386770707a67302e706e67)
Thats it. Happy coding.
Thanks, I have always needed this, until I saw this thread by you at demonate.
tbody style declaration was required to remember the collapse state :p
Tutorial updated.
thanks its working now...
Hi. I need help: Does anyone remodel me this table would roll in?
<table class="serwery" width="100%" cellspacing="1" cellpadding="4">
<tbody>
<tr>
<td class="thead" colspan="6" style="text-align:center;"> <center><strong>Serwery</strong><br></center>
</td>
</tr>
<tr>
<td width="130" class="tcat" style="text-align:center;"><span style="background: url(http://ferrycraft.cba.pl/images/adminbk.gif) no-repeat; color: orange; text-shadow: 0px 0px 5px red;"><strong>Rodzaj Serwera</strong></span></td>
<td width="35" class="tcat" style="text-align:center;"><span style="background: url(http://ferrycraft.cba.pl/images/adminbk.gif) no-repeat; color: orange; text-shadow: 0px 0px 5px red;"><strong>Sloty</strong></span></td>
<td width="140" class="tcat" style="text-align:center;"><span style="background: url(http://ferrycraft.cba.pl/images/adminbk.gif) no-repeat; color: orange; text-shadow: 0px 0px 5px red;"><strong>IP</strong></span></td>
<td width="300" class="tcat" style="text-align:center;"><span style="background: url(http://ferrycraft.cba.pl/images/adminbk.gif) no-repeat; color: orange; text-shadow: 0px 0px 5px red;"><strong>Monitoring</strong></span></td>
</tr>
<tr>
<td class="trow1" style="text-align:center;"><span style="color: orange; text-shadow: 0px 0px 5px orange;"><b>Surv+Frakcje</b></span></td>
<td class="trow1" style="text-align:center;"><span style="color: Yellow; text-shadow: 0px 0px 5px orange;"><b>25</b></span></td>
<td class="trow1" style="text-align:center;"><span style="color: Red; text-shadow: 0px 0px 5px orange;"><b>5.9.120.149:26120</b></span></td>
<td class="trow1" style="text-align:center;"><span class="smalltext"><a href="http://www.gametracker.com/server_info/5.9.120.149:26120/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/5.9.120.149:26120/b_350_20_5DFF1F_67E067_363636_73A70C.png" border="0" width="350" height="20" alt=""/></a></span></td>
</tr>
<tr>
<td class="trow1" style="text-align:center;"><span style="color: orange; text-shadow: 0px 0px 5px orange;"><b>FreeBuild</b></span></td>
<td class="trow1" style="text-align:center;"><span style="color: Yellow; text-shadow: 0px 0px 5px orange;"><b>14</b></span></td>
<td class="trow1" style="text-align:center;"><span style="color: Red; text-shadow: 0px 0px 5px orange;"><b>94.23.29.217:8020</b></span>
<td class="trow1" style="text-align:center;"><span class="smalltext"><a href="http://www.gametracker.com/server_info/94.23.29.217:8020/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/94.23.29.217:8020/b_350_20_5DFF1F_67E067_363636_73A70C.png" border="0" width="350" height="20" alt=""/></a></span></td>
</tr>
<tr>
<td class="trow1" style="text-align:center;"><span style="color: orange; text-shadow: 0px 0px 5px orange;"><b>BuildCity</b></span></td>
<td class="trow1" style="text-align:center;"><span style="color: Yellow; text-shadow: 0px 0px 5px orange;"><b>40</b></span></td>
<td class="trow1" style="text-align:center;"><span style="color: Red; text-shadow: 0px 0px 5px orange;"><b>Już Wkrótce!</b></span>
<td class="trow1" style="text-align:center;"><span style="color: Red; text-shadow: 0px 0px 5px orange;"><b>Już Wkrótce!</b></span></td>
</tr>
</tbody>
</table>
</center>
I'll try this with index_boards and see.
No, no, no. This is table off servers. I have a servers in minecraft and I can't added collapse.
@GibonekPL Heres your code with collapse added.
<table class="serwery" width="100%" cellspacing="1" cellpadding="4">
<tr>
<td class="thead" colspan="6"
style="text-align:center;"><strong>Serwery</strong>
<div class='expcolimage'><img src='images/collapse{$collapsedimg['serwery01']}.gif' id='serwery01_img' style='cursor: pointer;' class='expander' alt='[-]' title='[-]' /></div>
</td>
</tr>
<tbody id='serwery01_e' style='{$collapsed['serwery01_e']}'>
<tr>
<td width="130" class="tcat" style="text-align:center;"><span
style="background: url(http://ferrycraft.cba.pl/images/adminbk.gif)
no-repeat; color: orange; text-shadow: 0px 0px 5px
red;"><strong>Rodzaj
Serwera</strong></span></td>
<td width="35" class="tcat" style="text-align:center;"><span
style="background: url(http://ferrycraft.cba.pl/images/adminbk.gif)
no-repeat; color: orange; text-shadow: 0px 0px 5px
red;"><strong>Sloty</strong></span></td>
<td width="140" class="tcat" style="text-align:center;"><span
style="background: url(http://ferrycraft.cba.pl/images/adminbk.gif)
no-repeat; color: orange; text-shadow: 0px 0px 5px
red;"><strong>IP</strong></span></td>
<td width="300" class="tcat" style="text-align:center;"><span
style="background: url(http://ferrycraft.cba.pl/images/adminbk.gif)
no-repeat; color: orange; text-shadow: 0px 0px 5px
red;"><strong>Monitoring</strong></span></td>
</tr>
<tr>
<td class="trow1" style="text-align:center;"><span
style="color: orange; text-shadow: 0px 0px 5px
orange;"><b>Surv+Frakcje</b></span></td>
<td class="trow1" style="text-align:center;"><span
style="color: Yellow; text-shadow: 0px 0px 5px
orange;"><b>25</b></span></td>
<td class="trow1" style="text-align:center;"><span
style="color: Red; text-shadow: 0px 0px 5px
orange;"><b>5.9.120.149:26120</b></span></td>
<td class="trow1" style="text-align:center;"><span
class="smalltext"><a
href="http://www.gametracker.com/server_info/5.9.120.149:26120/"
target="_blank"><img
src="http://cache.www.gametracker.com/server_info/5.9.120.149:26120/b_350_20_5DFF1F_67E067_363636_73A70C.png"
border="0" width="350" height="20"
alt=""/></a></span></td>
</tr>
<tr>
<td class="trow1" style="text-align:center;"><span
style="color: orange; text-shadow: 0px 0px 5px
orange;"><b>FreeBuild</b></span></td>
<td class="trow1" style="text-align:center;"><span
style="color: Yellow; text-shadow: 0px 0px 5px
orange;"><b>14</b></span></td>
<td class="trow1" style="text-align:center;"><span
style="color: Red; text-shadow: 0px 0px 5px
orange;"><b>94.23.29.217:8020</b></span>
<td class="trow1" style="text-align:center;"><span
class="smalltext"><a
href="http://www.gametracker.com/server_info/94.23.29.217:8020/"
target="_blank"><img
src="http://cache.www.gametracker.com/server_info/94.23.29.217:8020/b_350_20_5DFF1F_67E067_363636_73A70C.png"
border="0" width="350" height="20"
alt=""/></a></span></td>
</tr>
<tr>
<td class="trow1" style="text-align:center;"><span
style="color: orange; text-shadow: 0px 0px 5px
orange;"><b>BuildCity</b></span></td>
<td class="trow1" style="text-align:center;"><span
style="color: Yellow; text-shadow: 0px 0px 5px
orange;"><b>40</b></span></td>
<td class="trow1" style="text-align:center;"><span
style="color: Red; text-shadow: 0px 0px 5px orange;"><b>Już
Wkrótce!</b></span>
<td class="trow1" style="text-align:center;"><span
style="color: Red; text-shadow: 0px 0px 5px orange;"><b>Już
Wkrótce!</b></span></td>
</tr>
</tbody>
</table>
Thank you very much.
I come from Polish so poorly written English
helo thanks for this, whats the code to make the table CLOSED by default?