Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Adding Collapse Buttons to Any Table

effone Offline
Junior Member
**

Posts: 14
Joined: Jan 2013
Likes Received : 11

Nationality:

Mood: None

Points: 315.96Points
Post: #1
Adding Collapse Buttons to Any Table

Today we will learn how to add MyBB's collapse buttons to any table. Interesting? Well, its easy too.
Lets see how it can me 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.gif" id="unique_id_img" class="expander tooltip" 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.

Code:
<td class="thead"><strong>Title of the Table</strong>
      <div class="expcolimage"><img src="{$theme['imgdir']}/collapse.gif" id="unique_id_img" class="expander tooltip" 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.

Code:
<tbody 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.gif" id="unique_id_img" class="expander tooltip" alt="[-]" title="[-]" /></div>
</td>
</tr>
<tbody 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 usique 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.
03-16-2013 12:37 AM
Find
2
Quote




envira Offline
Doctor Web
*******

Posts: 1,245
Joined: Aug 2012
Likes Received : 306

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,253.44Points
Post: #2
RE: Adding Collapse Buttons to Any Table

Very nice tutorial, infact very helpful for the new project of mine.
Thank a lot brother Smile,
regards

[Image: lt79ucY.png]
03-30-2013 12:06 AM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Heart Enhanced Social Share buttons Tutorial without plugins envira 15 8,550 11-03-2016 09:28 AM
Last Post: shamzblueworld
Thumbs Up Style your forum buttons with css : with multiquote working envira 12 5,579 03-04-2014 10:02 PM
Last Post: Tarek Fouad
  Adding "View New Posts" and "View Today's Posts" in Forum Jump List effone 2 6,194 01-29-2013 06:34 PM
Last Post: effone
Lightbulb Thead Collapse Button : Hover effects (show and hide) envira 2 2,522 08-23-2012 12:47 AM
Last Post: envira

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.