O.K. That kind of confuses me, Adwoman. I gave you a choice of two things and yes doesn't pick one. I think we might have a language/translater barrier? So do you want exactly another copy of what I gave you but just for some other content and you want it right next to the chat box tab?
Edit: I did add a second tab to my test site. Exactly like the first one but with different info.
proboardcolors.proboards.com/ So like that? (I still need to fiddle with the z-index so the pop-out content on the first one isn't overlapping the second new tab but I'll do that when I'm sure this is what you want.)
That's what I am looking for!!!!
O.K. Now what I'm going to explain to you might be confusing so I'll do my best to explain the steps you need to take to add that next tab.
First you need to add another set of html so right below the html you have now , make a second copy(bolded below) and on the second copy, change all the id's so they have a 2 after them like I did in red:
<div id="myMenu">
<div class="tabbie" id="MenuTab">Click For Cbox</div>
<!--1st toggle div content-->
<div class="tab_content" id="first" style="display:none;">
Cbox goes here
<div class="tabbie" id="show">Cbox Rules</div>
<!--2nd toggle div content-->
<div class="tab_content" id="rules_content" style="display:none;">
<h3>Cbox Rules</h3>
<p>
Give Admin cookies every day!<br><br>
Be nice to the Admin or else!<br><br>
Give Admin more cookies!
</p>
</div>
</div>
</div>
<div id="myMenu2">
<div class="tabbie2" id="MenuTab2">Second Tab</div>
<!--1st toggle div content-->
<div class="tab_content2" id="first2" style="display:none;">
Some other content here
<div class="tabbie2" id="show2">Some title here</div>
<!--2nd toggle div content-->
<div class="tab_content2" id="rules_content2" style="display:none;">
<h3>Staff</h3>
<p>
Some content here that is different from the other tabbed content
</p>
</div>
</div>
</div>
Next, what would be easiest for you is to make another copy of the jquery, paste it right below what you have and change the id's in the second one to have a 2 on the end. So your's should look like this with the bolded the second copy of the jquery.
<script>
$(document).ready(function(){
$('.tabbie').click(function() {
$(this).next('.tab_content').slideToggle('slow')
});
});
</script>
<script>
$(document).ready(function(){
$('.tabbie2').click(function() {
$(this).next('.tab_content2').slideToggle('slow')
});
});
</script>
Now we need to apply the new "2" css id's/classes to all the old css so what you need to do is add a comma after the first id/class and then add the new class/id:
Here is an example:
#myMenu div#first, #myMenu2 div#first2{
background-color:@container_background_color_1;
color:black;
border-top:5px solid #fbc328;
border-right:1px solid @title_bar_background_color;
border-bottom:1px solid @title_bar_background_color;
border-left:1px solid @title_bar_background_color;
height:400px;width:280px;
z-index:500;
}
I'll post a complete copy of my css below but do that with each group of styles. Now there are two sections that we need to change the positioning so you'll need to add some over-ridding css right below it. The first one is the the new id's because the positioning (
left) is different. In the second one, you may want to adjust the 330 px so it moves the tab where you want it to show.
#myMenu,
#myMenu2{
position: fixed;
bottom: 0;
left:10px;
width: 300px;
text-align: center;
margin-top:200px;
z-index:500;
}
#myMenu2{
left:330px;
}
and then this I added a override for the position in bold and also I changed the top:300 to 250 so the popup content is higher up not hiding behind the next tab: (An alternative would be to add a z-index of 502 to the first one and then adding a z-index on the second to be 501)
#rules_content
, #rules_content2 {
position:fixed;
top:250px;
left:350px;
width:300px;
height:300px;
font-size:12px;
padding:8px;
background-color:@container_background_color_1;
color:#000000;
border-top:5px solid #fbc328;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
z-index:501;
}
#rules_content2 {
left:650px;
}
Here is my css as it stands now:
/*bottom drawer by Tumbleweed*/
#myMenu div#first, #myMenu2 div#first2{
background-color:@container_background_color_1;
color:black;
border-top:5px solid #fbc328;
border-right:1px solid @title_bar_background_color;
border-bottom:1px solid @title_bar_background_color;
border-left:1px solid @title_bar_background_color;
height:400px;width:280px;
z-index:500;
}
#MenuTab, #MenuTab2{width:280px;
background:@title_bar_background_color
all _gradients left center repeat-x;
/*background-color: @title_bar_background_color;*/
color:@title_text_color;
height:24px;
font-size:14px!important;
border: 1px solid #000000;
border-top-right-radius: 50%;
border-top-left-radius:50%;
padding-top:10px;
overflow:hidden;
}
#MenuTab a, #MenuTab2 a{color:#000000;
}
#myMenu,#myMenu2 {
position: fixed;
bottom: 0;
left:10px;
width: 300px;
text-align: center;
margin-top:200px;z-index:500;
}
#myMenu2{
left:330px;
}
footer{margin-bottom:20px;
}
/*this is a rotated container so styles will be too*/
/*width is actually height_height is actually width*/
#show, #show2{
position:absolute;
top:199px;
right:-78px;
width:160px;
height:22px;
font-size:14px;
background:@title_bar_background_color
all _gradients left center repeat-x;
color:@title_text_color;
border:1px solid #000000;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
padding-top:8px;
-webkit-transform: rotate(90deg); /* Safari */
-moz-transform: rotate(90deg); /* Firefox */
-ms-transform: rotate(90deg); /* IE */
-o-transform: rotate(90deg);/* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/* Internet Explorer */
}
#rules_content, #rules_content2 {
position:fixed;
top:250px;
left:350px;
width:300px;
height:300px;
font-size:12px;
padding:8px;
background-color:@container_background_color_1;
color:#000000;
border-top:5px solid #fbc328;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
z-index:501;
}
#rules_content2 {
left:650px;
}
#rules_content p, #rules_content2 p {padding:8px;}
#rules_content h3, #rules_content2 h3{padding:8px;}
If you wanted to do more tabs you could repeat this by instead of adding 2 to the new copy id's/classes, adding 3 for the 3rd tab.
On a side note, sorry, I should have changed some of the css to reflect what the tabs are. I have menu for the class as it was a menu for me on my site)
Hopefully, I explained it well enough that you won't have any issue but if you do, just let me know.
Another side note: The css in the spoiler tags is set so it copies your theme colors whereas the one I posted at the first of this thread, did not.