Tabbed hooks

[trialnick]

Hi friends!

Bearing in mind that I have no knowledge about plugins and php, I want to ask next:

I found the thing I'd like to have on my forum. It is smth that guys who made it call "tabbed hooks".

Quote:Tabbed hooks
All hooks (recent topics, status updates, etc.) are now inside a nice fancy AJAX box with tabs. You've got to see this live. The whole "tabbed hooks" area can also be collapsed and expanded.

Code:

[b]http://live.skinbox.net/[/b]

---

choose theme VIRAL---and  below the menu is the frame that contain different options: recent posts, latest files etc.

Basically, there are tabbed hooks which are all represented in a one frame.

I want to get the same  for my forum: 1 tab that will contain the welcome message, 1 tab that will contain shoutbox , 1 tab that will contain recent posts ...

But I do not know how to build that. I already have the plugins I need for the tabs (meaning I have the plugin for shoutbox, recent posts) just have no single idea how to get them work together and display properly in the main window-frame.

Could you please guide me?

Thank you in advance

(collapsing option doesn't matter much, I could live without that )

[1master1]

have you seen the jquery tabbed forums tutorial at mybb tutorials. is it the similar thing used there. we can make it on mybb.

[leefish]

Looking at the "thing" then that is a jQuery tab set up.  RateU has posted the code for that kind of tab in this forum - I think in the garage forum. You just put it all in a set of divs and run jQuery no conflict.

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<script type="text/javascript"> jQuery(document).ready(function($){ $('.tab').click(function(){ $('.at').removeClass('at'); $(this).addClass('at'); $('.content').slideUp(); var catshow = $(this).attr('abbr'); $('#'+ catshow).slideDown(); }); }); </script> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; border-bottom-width: 0;"> <tr> <td class="thead at tab" title="tab1" style="cursor: pointer; text-align: center;" abbr="tab1"> <strong>tab1</strong> </td> <td class="thead tab" title="tab2" style="cursor: pointer; text-align: center;" abbr="tab2"> <strong>tab2</strong> </td> <td class="thead tab" title="tab3" style="cursor: pointer; text-align: center;" abbr="tab3"> <strong>tab3</strong> </td> <td class="thead tab" title="tab4" style="cursor: pointer; text-align: center;" abbr="tab4"> <strong>tab4</strong> </td> </tr> </table> <div id="tab1" class="content"> {$variable} </div> <div id="tab2" class="content"> {$variable2} </div> <div id="tab3" class="content"> {$variable3} </div> <div id="tab4" class="content"> {$variable4} </div> <br class="clear" />

---

and the put the below .css in your global.css

Code:

.at { background: #838383; color: #ffffff; } #tab1, #tab2, #tab3, #tab4{display: none;}

---

[trialnick]

Seems I missed his post. you are great !!! It works perfectly!

I have no words to thank you!