Current time: 29-03-2024, 12:12 AM
Hello There, Guest!
Login 
  • Search
  • Adding Collapse Buttons to Any Table


    MyBB Group Developer
    #1
    Template Edit 
    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="[color=#ff0000]unique_id_img" class="expander" alt="[-]" title="[-]" /></div>[/font]

    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['[color=#FF0000]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>[/font]

    >> 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 Big Grin

    [Image: 8gppzg0.png]

    Thats it. Happy coding.
    Like Reply