Missy72,
The collapse code is
here so there really is nothing to be "released". I can give you a blank example for you so you can see what I did.
This is the css to be put somewhere above the side tables. If you are using just the right side tables remove the blue. If you are using the left side only, remove the green.
<style type="text/css">
<!--
#sidetablesleft1 {
width: 210px;
margin-top: 6px;
margin-right: 6px;
}
#sidetablesleft {
width: 210px;
margin-top: 6px;
margin-right: 6px;
}
#sidetablesright1 {
width: 210px;
margin-top: 6px;
margin-left: 6px;
}
#sidetablesright {
width: 210px;
margin-top: 6px;
margin-left: 6px;
}.togboxes{
width: 210px;
height: 24px;
background-color:#998877;
color:#dddddd;
border: 1px solid #000000;
padding: 2px;
text-align: center;
font-size: 1.3em;
}
.togboxes a:link,.togboxes.a:visited{color: #dddddd;
}
.togboxes a:hover{color:#ff0000;
}
-->
</style>
Here is what your globals may look like if you are using the left sided side tables:
<table width="92%" align="center" cellpadding="5px" cellspacing="0px">
<tr>
<td vAlign="top">
<!--this toggles your whole side table-->
<div class="togboxes" style="margin-top: 5px; margin-right: 6px;">
<a href="Javascript:void(0);" onclick="toggle('all_left');">Open/Close Music Menu</a>
</div>
<!--The above can be put anywhere on your site--><!--opening div to toggle whole left side table-->
<div id="all_left"><!-- ===== BOX #
1 START ===== -->
<table id="sidetablesleft1" cellpadding="4px" class="bordercolor" cellspacing="1">
<tr><td align="center" class="titlebg">
<a href="Javascript:void(0);" onclick="toggle('box1_left');">Title1 that toggles content</a></td></tr>
<tr><td class="windowbg">
<div id="box1_left">Content to toggle goes here.
</div></td></tr></table>
<!-- ===== BOX #
2 START ===== -->
<table id="sidetablesleft" class="bordercolor" cellpadding="4" cellspacing="1">
<tr><td align="center" class="titlebg">
<a href="Javascript:void(0);" onclick="toggle('box2_left');">Title2 that toggles content</a></td></tr>
<tr><td class="windowbg">
<div id="box2_left">Content to toggle goes here
</div></td></tr></table>
<!--put all additional tables above this line-->
<!--closing div to toggle whole side table-->
</div> </td><td align="center" vAlign="top" width="100%">
<!--end of header side table-->
The maroon part at the top of your tables can go anywhere on your site and is customized with the css.I have it set up to toggle the whole side table. The green in there must match the div id also in green.
If you didn't want to toggle your whole side table then you'd remove the maroon and purple.
If you have side tables on the right and left you would need to give the right side a unique id. So the green would get changed to something like
"all_right".
To add more side boxes just copy the last side box and paste it above the commment tag I have in there. Each box has to have a unique id. As you can see I named the first box
box1_left and the 2nd box
box2_left so the third should be
box3_left .
If you were doing right sided tables then those ids should be box1_right, box2_right, etc.
The bolded red is what toggles the content and the unbolded red tells the browser where the content to toggle starts and ends.
Hope I explained this o.k.
Edit: I always forget something. In the link I provided for the collapse code, you will need to copy the larger javascript part and if you are using both right and left sided tables or the right sided tables put one copy below your side tables in your footer.
If you are using the left sided tables then put it below your side tables in your header.
Edited to correct a uppercase b in box (the id) when it should have been a lower case b in box (id).