Hello,

I have two tabs each with different styles and different text. One recent posts and one recent comments the css for each are below with the ones I need to have when they are selected.

So pretty much when a user selects the recent comments it will change the entire block to the second one (2). Pretty much changing width, and swapping the css for both tabs. I am currently using idtabs http://www.sunsean.com/idTabs/

My question: How can I have it change the tab css and width for both when the right tab is selected and then back again when the left tab is selected.

CSS

sideboxtopleft {

float: left; width: 121px; height:20px; background-image: url(images/categorysplitter.gif); background-position:top right; background-repeat:no-repeat; text-align: center; padding-top: 10px; margin: 0; }

sideboxtopleft2 {

float: left; width: 173px; height:20px; background-image: url(images/categorysplitter.gif); background-position:top right; background-repeat:no-repeat; text-align: center; padding-top: 10px; margin: 0; }

sideboxtopright {

float: right; width: 173px; height: 20px; background-image:url(images/categorybg.gif); text-align: center; padding-top: 10px; margin: 0; }

sideboxtopright2 {

float: right; width: 121px; height: 20px; background-image:url(images/categorybg.gif); text-align: center; padding-top: 10px; margin: 0; }

HTML

<div id="sidebox" style="padding: 0px; width:294px;">
<div class="idTabs">
<div id="sideboxtopleft">
<a href="#post"><h3>RECENT POSTS <img src="images/arrow.gif" width="9" height="5" alt="v" border="0" /></h3></a>
</div>
<div id="sideboxtopright">
<a href="#comments"><h3>RECENT COMMENTS <img src="images/arrow2.gif" width="6" height="9" alt=">" border="0" /></h3></a>
</div>
</div>
<div style="padding: 10px;">
<div id="post">
SUP?
</div>
<div id="comments">
SUP?>>!?>!!
</div>
</div>
</div>

<div id="sidebox" style="padding: 0px; width:294px;">
<div class="idTabs">
<div id="sideboxtopleft2">
<a href="#post2"><h3>RECENT COMMENTS <img src="images/arrow.gif" width="9" height="5" alt="v" border="0" /></h3></a>
</div>
<div id="sideboxtopright2">
<a href="#comments2"><h3>RECENT POSTS <img src="images/arrow2.gif" width="6" height="9" alt=">" border="0" /></h3></a>
</div>
</div>
<div style="padding: 10px;">
<div id="post2">
SUP?
</div>
<div id="comments2">
SUP?>>!?>!!
</div>
</div>
</div>