Radio buttons to show/hide divs

jonsan32 12 Junior Poster in Training

10 Years Ago

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]
[img]
[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="" class="fadepic" width="240" height="100" id="cell1"></td> <td width="25%"><img src=""  class="fadepic" width="240" height="100" id="cell2"></td> <td width="25%"><img src=""  class="fadepic" width="240" height="100" id="cell3"></td> <td width="25%"><img src=""  class="fadepic" width="240" height="100" id="cell4"></td> </tr> <tr> <td height="100"><img src="" class="fadepic" width="240" height="100" id="cell5"></td> <td><img src=""  class="fadepic" width="240" height="100" id="cell6"></td> <td><img src=""  class="fadepic" width="240" height="100" id="cell7"></td> <td><img src=""  class="fadepic" width="240" height="100" id="cell8"></td> </tr> <tr> <td height="100"><img src=""  class="fadepic" width="240" height="100" id="cell9"></td> <td><img src=""  class="fadepic" width="240" height="100" id="cell10"></td> <td><img src=""  class="fadepic" width="240" height="100" id="cell11"></td> <td><img src=""  class="fadepic" width="240" height="100" id="cell12"></td> </tr> <tr> <td height="100"><img src=""  class="fadepic" width="240" height="100" id="cell13"></td> <td><img src=""  class="fadepic" width="240" height="100" id="cell14"></td> <td><img src=""  class="fadepic" width="240" height="100" id="cell15"></td> <td><img src=""  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>

Edited 10 Years Ago by pritaeas because: Moved to web dev.

1 Contributor
0 Replies
186 Views

Dani AI

Generated 6 Months Ago

Diagnosis and focused fixes for 's layout: the top four controls must be a single radio group (all inputs need the same name) to be mutually exclusive. In the posted markup the header cells are changing visual classes but not the inputs' checked state, and the form tag is closed partway through the table — both cause the DOM state and UI to get out of sync. Radios also cannot be “deselected” by clicking them again unless extra logic or a dedicated “none” option exists, so that explains the trouble with showing the default grid after a click.

Recommended patterns (no copy/paste code from the thread):

Default/deselect behavior: add an explicit, initially-checked “none/default” option that maps to the default image grid, or implement a small click handler that, when the active header is clicked a second time, programmatically clears the group (or selects the default). Radios do not provide toggle-off behavior by themselves.
Keep markup and state in sync: make header cells labels (or put the input inside the cell) so clicking the visual element updates the radio naturally. Give all radios the same name, unique ids, and use a single change handler that reads the checked radio and shows the associated panel.
Mapping and accessibility: map header -> panel with data- attributes rather than brittle class name checks; toggle an “active” class on panels instead of directly manipulating styles so CSS transitions and print/accessible styles remain predictable. Add aria-controls/aria-pressed as appropriate and ensure keyboard focus works.

Practical checklist to apply:

Fix markup: shared radio name, valid form nesting, unique ids.
Replace onclick-only visuals with label-for wiring so checked state follows the click.
Implement one change handler that hides all panels then shows the panel identified by the checked control.
Add a hidden/default radio or a reset/back control to restore the default grid.
Test keyboard-only and screen-reader behavior and consider CSS Grid for the 4x4 layout instead of tables.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.