Help with buttons/tabs (within tabs)

Hello, I have a sheet where there are 6 generic tabs. Within 1 of those tabs I have another set of buttons that I want the page to display a certain area of the grid with different stuff.  Each button should reveal the edit sheet for that psionic. How I have it now, grid wise, I do like... but I'm kinda stumped for what to do next. I have the buttons, but I'm not super confident in placing the what divs where in order to get it to reveal the psionic. I'm out of my depth... Basically the idea is that if you click on Edit Psionics on the main buttons up top, and then once that window pops up, you can then press the button for the psionic that you want to look at, revealing all of the info for that one psionic (there are 11... at least 11, we'll be adding more later). Here is the HTML < div class =" sheet-editpsionics ">     < h3 style =" grid-column: 1 / -1; text-align:center; padding-top: 10px; "> PSIONICS EDIT PAGE </ h3 >     <!-- PAGE HEADER BELOW BUTTONS -->               <!-- Add your HTML HERE -->         < div class =" sheet-edit-psionics-grid-section ">                                   < div class =" sheet-life-energy sheet-block " style =" text-align: center; ">                                 < h3 style =" grid-column: 1 / -1; padding-top: 5px; "> Life Cord </ h3 >                 < span class =" sheet-blue-color " style =" text-align: right; padding-top: 5px; "> L.E. </ span class =" sheet-blue-color " />                 < input class =" sheet-inputfieldlc sheet-blue-color " title =" Your Current Life Energy " type =" number " name =" attr_life_energy " value =" attr_life_energy "  />                                                 < input class =" sheet-inputfieldlc sheet-blue-color " title =" Your Maximum Life Energy " type =" number " name =" attr_life_energy_full " value ="" />                 < span class =" sheet-blue-color " style =" text-align: left; padding-top: 5px; "> Max </ span class =" sheet-blue-color " />                                 < span class =" sheet-blue-color " style =" text-align: right; padding-top: 5px; "> RE </ span >                 < input class =" sheet-inputfieldlc sheet-blue-color " title =" Your Current Raw Energy Output " type =" number " name =" attr_raw_energy " value =" floor(@{life_energy} / 100) " disabled />                                                 < input class =" sheet-inputfieldlc sheet-blue-color " title =" Your Current Raw Energy Output " type =" number " name =" attr_sphere_of_influence " value =" floor(@{life_energy} / 100) " disabled />                 < span class =" sheet-blue-color " style =" text-align: left; padding-top: 5px; "> SoI </ span >                                                 < span class =" sheet-blue-color " style =" font-size:x-small; text-align: right; padding-top: 5px; "> Regen % </ span class =" sheet-blue-color " />                 < input class =" sheet-inputfieldlc sheet-blue-color " title =" This the percentage of your potential maximum that you regenerate per day " type =" number " name =" attr_life_energy_regen_percent "   value =" 10 " min =" -100 " max =" 100 " />                                                                                 < input class =" sheet-inputfieldlc sheet-blue-color " title =" Actual Life Energy per day " type =" number " name =" attr_life_energy_regenerated " value =" (@{life_energy_full}/100)*(@{life_energy_regen_percent}) " disabled />                 < span class =" sheet-blue-color " style =" text-align: left; padding-top: 5px; "> LE:Day </ span class =" sheet-blue-color " />             </ div >                                 < div class =" edit-psionics-buttons ">                           < input type =" hidden " class =" sheet-tabstoggle1 " name =" attr_sheetTab2 "   value =" body-discipline " />                                                       < button class =" sheet-button-roll2 " type =" action " name =" act_body-discipline " > Body Disc </ button >                               < button class =" sheet-button-roll2 " type =" action " name =" act_causation " > Causation </ button >                     < button class =" sheet-button-roll2 " type =" action " name =" act_clairvoyance " > Clairvoyance </ button >                     < button class =" sheet-button-roll2 " type =" action " name =" act_deflection " > Deflection </ button >                     < button class =" sheet-button-roll2 " type =" action " name =" act_domination " > Domination </ button >                       < button class =" sheet-button-roll2 " type =" action " name =" act_energy-communion " > Energy </ button >                                               < button class =" sheet-button-roll2 " type =" action " name =" act_molecular-alteration " > Molecular </ button >                     < button class =" sheet-button-roll2 " type =" action " name =" act_pyrokinesis " > Pyrokinesis </ button >                     < button class =" sheet-button-roll2 " type =" action " name =" act_subatomic-alteration " > Subatomic </ button >                     < button class =" sheet-button-roll2 " type =" action " name =" act_telekinesis " > Telekinesis </ button >                       < button class =" sheet-button-roll2 " type =" action " name =" act_anti-psionics " > Anti Psi </ button >               </ div >                 < div class =" sheet-body-discipline sheet-block ">                                                                 < h4 class =" sheet-blue-color "> Body Discipline Page??? </ h4 >                         < h4 class =" sheet-blue-color "> Body Discipline Page??? </ h4 >                                     </ div >                   < div class =" sheet-causation sheet-block ">                                         < div class =" edit-psionics ">                         < h4 class =" sheet-blue-color "> Causation Page??? </ h4 >                         < h4 class =" sheet-blue-color "> Causation Page??? </ h4 >                                             </ div >                 </ div >                               </ div >         </ div > </ div >     CSS /*Configure the tab buttons*/ . charsheet . sheet-body-discipline , . charsheet . sheet-causation , . charsheet . sheet-clairvoyance , . charsheet . sheet-dominiation , . charsheet . sheet-energy-communion , . charsheet . sheet-molecular-alteration , . charsheet . sheet-pyrokinesis , . charsheet . sheet-subatomic-alteration , . charsheet . sheet-telekinesis , . charsheet . sheet-anti-psionics {     display : none ; } /* show the selected tab */ . charsheet . sheet-tabstoggle1 [ value = " body-discipline " ] ~ div . sheet-body-discipline , . charsheet . sheet-tabstoggle1 [ value = " causation " ] ~ div . sheet-caustion , . charsheet . sheet-tabstoggle1 [ value = " clairvoyance " ] ~ div . sheet-clairvoyance , . charsheet . sheet-tabstoggle1 [ value = " deflection " ] ~ div . sheet-deflection , . charsheet . sheet-tabstoggle1 [ value = " domination " ] ~ div . sheet-domination , . charsheet . sheet-tabstoggle1 [ value = " energy-communion " ] ~ div . sheet-energy-communion , . charsheet . sheet-tabstoggle1 [ value = " molecular-alteration " ] ~ div . sheet-molecular-alteration , . charsheet . sheet-tabstoggle1 [ value = " pyrokinesis " ] ~ div . sheet-pyrokinesis , . charsheet . sheet-tabstoggle1 [ value = " subatomic-alteration " ] ~ div . sheet-subatomic-alteration , . charsheet . sheet-tabstoggle1 [ value = " telekinesis " ] ~ div . sheet-telekinesis , . charsheet . sheet-tabstoggle1 [ value = " anti-psionics " ] ~ div . sheet-anti-psionics {     display : block ; } /* This is the part that describes the grid for this section */ /* START OF PSIONICS EDIT PAGE */ . charsheet . sheet-edit-psionics-grid-section {     display : grid ;     grid-gap : 5px ;     grid-template-columns :   240px 195px 195px 195px ;     grid-template-rows : auto auto auto auto auto auto auto auto ;     grid-template-areas :     " edit-life-energy edit-psionics-buttons edit-psionics-buttons edit-psionics-buttons "     " edit-life-energy edit-psionics edit-psionics edit-psionics "     " edit-life-energy edit-psionics edit-psionics edit-psionics "     " edit-life-energy edit-psionics edit-psionics edit-psionics "     " edit-life-energy edit-psionics edit-psionics edit-psionics "     " edit-life-energy edit-psionics edit-psionics edit-psionics "     " edit-life-energy edit-psionics edit-psionics edit-psionics "     " edit-life-energy edit-psionics edit-psionics edit-psionics " } . charsheet div . sheet-life-energy {     grid-area : edit-life-energy ;     grid-template-columns : 3.5em 3em 3.5em 3em ;         grid-auto-rows : 28px ;     grid-gap : 10px ;     } . charsheet div . edit-psionics-buttons {         grid-area : edit-psionics-buttons ;     grid-template-columns : 6em 1fr 1fr 1fr 1fr 1fr ;             grid-auto-rows : 28px ;     grid-gap : 5px ;         } . charsheet div . psionics-buttons h3 {     grid-column : 1 / -1 ;         text-align : center ;     grid-row : 1 ;     } . charsheet div . edit-psionics {         grid-area : edit-psionics ;     grid-template-columns : 6em 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;         grid-auto-rows : 28px ;     grid-gap : 5px ;         } . charsheet div . sheet-psionics h3 {     grid-column : 1 / -1 ;         text-align : center ;     grid-row : 1 ;     } /* END OF PSIONICS EDIT PAGE */

Use the exact method you used to create the top level tabs. Seeting a specific psionic visible or invisible will only have any effect if the tab its in is visible. Here's a very quick, working, mock-up for you to try out and study. Say you had three top tabs, Psionics, Warriors, and Rogues, and in the Psionics tab you had Fred, Bob, amd Daphne. Your basic HTML structure could be < select name = "attr_class" >     < option > Psionics </ option >     < option > Warriors </ option >     < option > Rogues </ option > </ select > < input type = "hidden" class = "classes" name = "attr_class" value = "Psionics" > < div class = "psionics invisible" >     here be psionics     < select name = "attr_psionic" >         < option > Fred </ option >         < option > Bob </ option >         < option > Daphne </ option >     </ select >     < input type = "hidden" class = "psionic" name = "attr_psionic" value = "Fred" >     < div class = "fred invisible" >         fred     </ div >     < div class = "bob invisible" >         bob     </ div >     < div class = "daphne invisible" >         daphne     </ div > </ div > < div class = "warriors invisible" >     here be warriors </ div > < div class = "rogues invisible" >     here be rogues </ div > And the CSS ( the important bit): div.sheet-invisible {     display : none ; } input [ type = hidden ] .sheet-classes [ value = Psionics ] ~ div.sheet-psionics , input [ type = hidden ] .sheet-classes [ value = Warriors ] ~ div.sheet-warriors , input [ type = hidden ] .sheet-classes [ value = Rogues ] ~ div.sheet-rogues , input [ type = hidden ] .sheet-psionic [ value = Fred ] ~ div.sheet-fred , input [ type = hidden ] .sheet-psionic [ value = Bob ] ~ div.sheet-bob , input [ type = hidden ] .sheet-psionic [ value = Daphne ] ~ div.sheet-daphne {     display : grid ; } There's other ways to do the tab switching, but I just created a quick one so you could see the process.