Minimize tables under text link (used jQuery and Javascript already)

I have tried jQuery and overflow hidden and toggle options but none of them will allow me to do what i wish to do with these tables. here's a picture of what I want to do....

http://26.media.tumblr.com/tumblr_lmvixzfYyY1qzp8feo1_500.jpg

I want the tables I've created to span the whole browser, I presume its a bit like tabs except I don't want them to be visible until the user clicks on the text o开发者_StackOverflow社区ption; I hope there's a way - I've seen it done before - so that when the page loads only the text is visible and then when the user clicks on the text the picture and options drop down. The code I've tried only work for one link or the code conflicts and the tables aren't 100% across either. Sorry, I'll tell you I'm fairly basic in my coding knowledge but any help is greatly appreciated!

culturecouture.cc

alternative to jquery-ui jquery-tools might be: http://flowplayer.org/tools/demos/tabs/index.html

you could use:

$("#mytabs .shouldBehidden").hide();

Or I hope this code will clarify the potential methods and provided by jQuery Tools!

// Place the filter in the appropriate position
$("#new-filter-tab").before(data.filter);
$("#new-filter-pane").before(data.content);

// Remove the existing Tabs instance
$("ul.filter-tabs").removeData("tabs");
// Recreate the Tabs
$("ul.filter-tabs").tabs("div.filter-panes > div");
var filters = $("ul.filter-tabs").tabs();

// And select the new filter
var filterCount = filters.getTabs().length;
filters.click(filterCount - 1);