Radio buttons to show/hide divs

[jonsan32]

I'm trying to create a navigation menu that is a table of 4x5 boxes. The top 4 should have radio-style behavior that brings up a different set of 16 boxes below it when clicked. I'm also trying to have a default set of boxes that display pictures when the page first initiates and no boxes are yet selected AND when a box is de-selected. Lastly, I'd need for another table to display once an actually link (of the 16) is selected. I've given this my best attempt over the past few days, but I'm getting nowhere fast. Any help would be majorly appreciated. Thanks.

[img]https://dl.dropboxusercontent.com/u/5739741/OMAR/images/default.png[/img]
[img]https://dl.dropboxusercontent.com/u/5739741/OMAR/images/header%20clicked.png[/img]
[img]https://dl.dropboxusercontent.com/u/5739741/OMAR/images/link%20clicked.png[/img]

<style>
[type='radio'] {
    opacity:0.01;
    z-index:100;
}

td{
background-color:#dddddd;
}

.fadepic{
opacity:0.3;
}
.fadepic:hover{
opacity:0.8;
cursor:cell;
}

.button4{
border:1px #FFCC00 solid;
color:#FFAA00;
letter-spacing:5px;
font-size:20px; 
background-color:#222222;
cursor:pointer;
height:100px;}

.button4_selected {
border:2px #000000 solid;
background-color:#FFCC00;
cursor:pointer;
letter-spacing:7px;
font-size:22px; 
font-weight:bold;}


.button4:hover {
border:2px #FFCC00 solid;
color:#FFCC00;
letter-spacing:5px;
font-size:20px; 
background-color:#222222;
cursor:pointer;
height:100px;}

    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
</style> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript">
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="main1"){
            $(".box").not(".main1").hide();
            $(".main1").show();
        }
        if($(this).attr("value")=="main2"){
            $(".box").not(".main2").hide();
            $(".main2").show();
        }
        if($(this).attr("value")=="main3"){
            $(".box").not(".main3").hide();
            $(".main3").show();
        }
        if($(this).attr("value")=="main4"){
            $(".box").not(".main4").hide();
            $(".main4").show();
        }
    });
});
</script> <script type="text/javascript">
function setColor(what)
{
    var thetds = document.getElementsByTagName('td');
    for(var i = 0; i < thetds.length; i++)
    {
        if(thetds[i].className == 'button4_selected')
        {
            thetds[i].className = 'button4';
        }
    }
    what.className = 'button4_selected';
}
</script> <center><form> <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5> <tr> <td width="25%" onclick="setColor(this)" class="button4"><input type="radio" value="main1">EVENTS</input></td> <td width="25%"  onclick="setColor(this)" class="button4"><input type="radio"   value="main2">CALENDAR</td> <td width="25%" onclick="setColor(this)" class="button4"><input type="radio"  value="main3">DETAILS</td> <td width="25%" onclick="setColor(this)" class="button4"><input type="radio"  value="main4">PLAYS</td></tr> <tr> </form> </table> <div id="home1"> <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5> <tr> <td width="25%" height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell8.jpg" class="fadepic" width="240" height="100" id="cell1"></td> <td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell1.jpg"  class="fadepic" width="240" height="100" id="cell2"></td> <td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell2.jpg"  class="fadepic" width="240" height="100" id="cell3"></td> <td width="25%"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell9.jpg"  class="fadepic" width="240" height="100" id="cell4"></td> </tr> <tr> <td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell5.jpg" class="fadepic" width="240" height="100" id="cell5"></td> <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell3.jpg"  class="fadepic" width="240" height="100" id="cell6"></td> <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell4.jpg"  class="fadepic" width="240" height="100" id="cell7"></td> <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell10.jpg"  class="fadepic" width="240" height="100" id="cell8"></td> </tr> <tr> <td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell9.jpg"  class="fadepic" width="240" height="100" id="cell9"></td> <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell5.jpg"  class="fadepic" width="240" height="100" id="cell10"></td> <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell6.jpg"  class="fadepic" width="240" height="100" id="cell11"></td> <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell1.jpg"  class="fadepic" width="240" height="100" id="cell12"></td> </tr> <tr> <td height="100"><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell10.jpg"  class="fadepic" width="240" height="100" id="cell13"></td> <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell7.jpg"  class="fadepic" width="240" height="100" id="cell14"></td> <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell8.jpg"  class="fadepic" width="240" height="100" id="cell15"></td> <td><img src="https://dl.dropboxusercontent.com/u/5739741/OMAR/images/cell2.jpg"  class="fadepic" width="240" height="100" id="cell16"></td> </tr> </table> </div> <div class="main1 box"> <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5> <tr> <td height="100" width="25%" height="100">LINK 1</td> <td width="25%" height="100">LINK 2</td> <td width="25%" height="100">LINK 3</td> <td width="25%" height="100">LINK 4</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 5</td> <td width="25%" height="100">LINK 6</td> <td width="25%" height="100">LINK 7</td> <td width="25%" height="100">LINK 8</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 9</td> <td width="25%" height="100">LINK 10</td> <td width="25%" height="100">LINK 11</td> <td width="25%" height="100">LINK 12</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 13</td> <td width="25%" height="100">LINK 14</td> <td width="25%" height="100">LINK 15</td> <td width="25%" height="100">LINK 16</td> </tr> </table> </div> <div class="main2 box"> <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5> <tr> <td height="100" width="25%" height="100">LINK 1</td> <td width="25%" height="100">LINK 2</td> <td width="25%" height="100">LINK 3</td> <td width="25%" height="100">LINK 4</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 5</td> <td width="25%" height="100">LINK 6</td> <td width="25%" height="100">LINK 7</td> <td width="25%" height="100">LINK 8</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 9</td> <td width="25%" height="100">LINK 10</td> <td width="25%" height="100">LINK 11</td> <td width="25%" height="100">LINK 12</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 13</td> <td width="25%" height="100">LINK 14</td> <td width="25%" height="100">LINK 15</td> <td width="25%" height="100">LINK 16</td> </tr> </table> </div> <div class="main3 box"> <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5> <tr> <td height="100" width="25%" height="100">LINK 1</td> <td width="25%" height="100">LINK 2</td> <td width="25%" height="100">LINK 3</td> <td width="25%" height="100">LINK 4</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 5</td> <td width="25%" height="100">LINK 6</td> <td width="25%" height="100">LINK 7</td> <td width="25%" height="100">LINK 8</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 9</td> <td width="25%" height="100">LINK 10</td> <td width="25%" height="100">LINK 11</td> <td width="25%" height="100">LINK 12</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 13</td> <td width="25%" height="100">LINK 14</td> <td width="25%" height="100">LINK 15</td> <td width="25%" height="100">LINK 16</td> </tr> </table> </div> <div class="main4 box"> <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=0 cellspacing=5> <tr> <td height="100" width="25%" height="100">LINK 1</td> <td width="25%" height="100">LINK 2</td> <td width="25%" height="100">LINK 3</td> <td width="25%" height="100">LINK 4</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 5</td> <td width="25%" height="100">LINK 6</td> <td width="25%" height="100">LINK 7</td> <td width="25%" height="100">LINK 8</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 9</td> <td width="25%" height="100">LINK 10</td> <td width="25%" height="100">LINK 11</td> <td width="25%" height="100">LINK 12</td> </tr> <tr> <td height="100" width="25%" height="100">LINK 13</td> <td width="25%" height="100">LINK 14</td> <td width="25%" height="100">LINK 15</td> <td width="25%" height="100">LINK 16</td> </tr> </table> </div> <div class="FINAL box"> <table style="border:0px black solid; width:990px; text-align:center;font-family:arial;" border=1 cellspacing=5> <tr> <td height="100" width="75%" height="100" colspan="3" rowspan="4">MAIN INFO</td> <td width="25%" height="100">BACK LINK</td> </tr> <tr> <td height="100" width="25%" height="100">ACTION LINK 1</td> </tr> <tr> <td height="100" width="25%" height="100">ACTION LINK 2</td> </tr> <tr> <td height="100" width="25%" height="100">ACTION LINK 3</td> </tr> </table> </div> </center>