Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[help] CSS hide/show dropdown menus via checkbox

Ok another wall.. I just seem to be hitting them all lately, but at least I am learning. This time I have made two dropdown menus. When one checkbox from the first menu is checked, a list of choice in the second should become visable. I have been trying a lot of the suggestion on the forum. Sorry if the code is messy I am so novice its not funny. If you do see anything that you think can be cleaned or made less messy please let me know. <table>   <tr>     <td>       <td class='sheet-bckgnddrop'>         <div class="sheet-occ-dropdown">           <button class="sheet-occ-dropbtn"><span class='sheet-buttext'>Occupation</span></button>           <div class="sheet-occ-dropdown-content">             <a href="#">               <input type='checkbox' class='sheet-occ1'>Survivor</a>             <br>             <a href="#">               <input type='checkbox' class='sheet-occ2'>Tradie</a>             <br>             <a href="#">               <input type='checkbox' class='sheet-occ3'>Store Owner</a>             <br>             <a href="#">               <input type='checkbox' class='sheet-occ4'>Professional</a>             <br>             <a href="#">               <input type='checkbox' class='sheet-occ5'>Emergency Services</a>             <br>             <a href="#">               <input type='checkbox' class='sheet-occ6'>Militray</a>           </div>         </div>         <div class="sheet-arc-dropdown">           <button class="sheet-arc-dropbtn"><span class='sheet-butttext'>Archtype</span></button>           <div class="sheet-arc-dropdown-content">             <div class='archdivider'>               <a href="#">                 <input type='checkbox' class='sheet-arch'><span class='sheet-archtit'>Scout</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch'><span class='sheet-archtit'>Student</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch'><span class='sheet-archtit'>Athlete</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch'><span class='sheet-archtit'>Biker</span></a>               <br>             </div>             <div class='archdivider1'>               <a href="#">                 <input type='checkbox' class='sheet-arch1'><span class='sheet-archtit1'>Carpenter</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch1'><span class='sheet-archtit1'>Butcher</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch1'><span class='sheet-archtit1'>Mechanic</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch1'><span class='sheet-archtit1'>Sparkie</span></a>               <br>             </div>             <div class='archdivider2'>               <a href="#">                 <input type='checkbox' class='sheet-arch2'><span class='sheet-archtit2'>Car Yard</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch2'><span class='sheet-archtit2'>Gun Store</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch2'><span class='sheet-archtit2'>Warehouse</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch2'><span class='sheet-archtit2'>Super Market</span></a>               <br>             </div>             <div class='archdivider3'>               <a href="#">                 <input type='checkbox' class='sheet-arch3'><span class='sheet-archtit3'>Chemist</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch3'><span class='sheet-archtit3'>Fisherman</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch3'><span class='sheet-archtit3'>Rangee</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch3'><span class='sheet-archtit3'>Security Guard</span></a>               <br>             </div>             <div class='archdivider4'>               <a href="#">                 <input type='checkbox' class='sheet-arch4'><span class='sheet-archtit4'>Fireman</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch4'><span class='sheet-archtit4'>Paramedic</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch4'><span class='sheet-archtit4'>Police Officer</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch4'><span class='sheet-archtit4'>Riot Squad</span></a>               <br>             </div>             <div class='archdivider5'>               <a href="#">                 <input type='checkbox' class='sheet-arch5'><span class='sheet-archtit5'>Army</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch5'><span class='sheet-archtit5'>Navy</a><br>                 <a href="#"><input type='checkbox' class='sheet-arch5'><span class='sheet-archtit5'>Airfoce</span></a>               <br>               <a href="#">                 <input type='checkbox' class='sheet-arch5'><span class='sheet-archtit5'>Veteran</span></a>               <br>             </div>           </div>         </div>       </td>   </tr> </table> .sheet-occ-dropbtn {   box-shadow: 0 0 5px 1px #DADADA background-color: #DADADA;   color: black;   padding: 2px;   font-size: 9.5px;   border: 1px solid black;   cursor: pointer;   width: 9em;   height: 27px; } /* The container <div> - needed to position the dropdown content */ .sheet-occ-dropdown {   position: relative;   display: inline-block; } /* Dropdown Content (Hidden by Default) */ .sheet-occ-dropdown-content {   display: none;   position: absolute;   background-color: #f9f9f9;   min-width: 160px;   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } /* Links inside the dropdown */ .sheet-occ-dropdown-content a {   color: black;   padding: 12px 16px;   text-decoration: none;   float: left;   display: inline-block; } /* Change color of dropdown links on hover */ .sheet-occ-dropdown-content a:hover {   background-color: #A9A9A9 } /* Show the dropdown menu on hover */ .sheet-occ-dropdown:hover .sheet-occ-dropdown-content {   display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .sheet-occ-dropdown:hover .sheet-occ-dropbtn {   background-color: #A9A9A9; } .sheet-arc-dropbtn {   box-shadow: 0 0 5px 1px #DADADA background-color: #DADADA;   color: black;   padding: 2px;   font-size: 9.5px;   border: 1px solid black;   cursor: pointer;   width: 9em;   height: 27px; } /* The container <div> - needed to position the dropdown content */ .sheet-arc-dropdown {   position: relative;   display: inline-block; } /* Dropdown Content (Hidden by Default) */ .sheet-arc-dropdown-content {   display: none;   position: absolute;   background-color: #f9f9f9;   min-width: 160px;   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } /* Links inside the dropdown */ .sheet-arc-dropdown-content a {   color: black;   padding: 12px 16px;   text-decoration: none;   float: left;   display: inline-block;   margin: 10px; } /* Change color of dropdown links on hover */ .sheet-arc-dropdown-content a:hover {   background-color: #A9A9A9 } /* Show the dropdown menu on hover */ .sheet-arc-dropdown:hover .sheet-arc-dropdown-content {   display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .sheet-arc-dropdown:hover .sheet-arc-dropbtn {   background-color: #A9A9A9; } /*hide and display archtypes dependent on occupation*/ div.sheet-archdivider, div.sheet-archdivider1, div.sheet-archdivider2, div.sheet-archdivider3, div.sheet-archdivider4, div.sheet-archdivider5 {   display: none; } input[value='1']:checked ~ div.sheetarchdivider {   display: inline; }
1458327833
Finderski
Pro
Sheet Author
Compendium Curator
Your first problem is the that none of the checkboxes have a name, nor a value. The name should be something like "attr_checkbox1", and the value can be anything, for something like you are wanting to accomplish, I recommend numbers.
1458350195

Edited 1458352732
Ok so I gave everything a name and value. Do I now use those in my CSS and if so how? The follow does not work and I just can't see what I am doing wrong. /*hide and display archtypes dependent on occupation*/ div.sheet-archdivider, div.sheet-archdivider1, div.sheet-archdivider2, div.sheet-archdivider3, div.sheet-archdivider4, div.sheet-archdivider5 {     display: none; } input.sheet-occ1[type='checkbox']:checked ~ div.sheet-archdivider {     float: middle; }  <table class='sheet-dettab'>             <tr>               <td><span class='sheet-detlabel'>Home</span></td>               <td>                 <input type='text' class='sheet-shortinput'>               </td>             </tr>             <tr>                            <td>                  <td class='sheet-bckgnddrop'> <div class="sheet-occ-dropdown">                      <button class="sheet-occ-dropbtn"><span class='sheet-buttext'>Occupation</span></button>                         <div class="sheet-occ-dropdown-content">                             <a href="#"><input type='checkbox' class='sheet-occ1' name='attr_sur' value='0'>Survivor</a><br>                             <a href="#"><input type='checkbox' class='sheet-occ2' name='attr_trad' value='1'>Tradie</a><br>                             <a href="#"><input type='checkbox' class='sheet-occ3' name='attr_stor' value='2'>Store Owner</a><br>                             <a href="#"><input type='checkbox' class='sheet-occ4' name='attr_pro' value='3'>Professional</a><br>                             <a href="#"><input type='checkbox' class='sheet-occ5' name='attr_eme' value='4'>Emergency Services</a><br>                             <a href="#"><input type='checkbox' class='sheet-occ6' name='attr_mil' value='5'>Militray</a>                          </div>                   </div>                                                                <div class="sheet-arc-dropdown">                      <button class="sheet-arc-dropbtn"><span class='sheet-butttext'>Archtype</span></button>                                                  <div class="sheet-arc-dropdown-content">                         <div class='archdivider'>                             <a href="#"><input type='checkbox' class='sheet-arch' name='attr_sco' value='6'><span class='sheet-archtit'>Scout</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch' name='attr_stu' value='7'><span class='sheet-archtit'>Student</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch' name='attr_ath' value='8'><span class='sheet-archtit'>Athlete</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch' name='attr_bik' value='9'><span class='sheet-archtit'>Biker</span></a><br>                         </div>                         <div class='archdivider1'>                             <a href="#"><input type='checkbox' class='sheet-arch1' name='attr_car' value='10'><span class='sheet-archtit1'>Carpenter</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch1' name='attr_but' value='11'><span class='sheet-archtit1'>Butcher</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch1' name='attr_mec' value='12'><span class='sheet-archtit1'>Mechanic</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch1' name='attr_spa' value='13'><span class='sheet-archtit1'>Sparkie</span></a><br>                             </div>                         <div class='archdivider2'>                             <a href="#"><input type='checkbox' class='sheet-arch2' name='attr_car' value='14'><span class='sheet-archtit2'>Car Yard</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch2' name='attr_gun' value='15'><span class='sheet-archtit2'>Gun Store</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch2' name='attr_war' value='16'><span class='sheet-archtit2'>Warehouse</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch2' name='attr_sup' value='17'><span class='sheet-archtit2'>Super Market</span></a><br>                             </div>                         <div class='archdivider3'>                             <a href="#"><input type='checkbox' class='sheet-arch3' name='attr_che' value='18'><span class='sheet-archtit3'>Chemist</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch3' name='attr_fis' value='19'><span class='sheet-archtit3'>Fisherman</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch3' name='attr_ran' value='20'><span class='sheet-archtit3'>Rangee</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch3' name='attr_sec' value='21'><span class='sheet-archtit3'>Security Guard</span></a><br>                             </div>                         <div class='archdivider4'>                             <a href="#"><input type='checkbox' class='sheet-arch4'name='attr_fir' value='22'><span class='sheet-archtit4'>Fireman</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch4'name='attr_par' value='23'><span class='sheet-archtit4'>Paramedic</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch4'name='attr_pol' value='24'><span class='sheet-archtit4'>Police Officer</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch4'name='attr_rio' value='25'><span class='sheet-archtit4'>Riot Squad</span></a><br>                             </div>                         <div class='archdivider5'>                             <a href="#"><input type='checkbox' class='sheet-arch5' name='attr_arm' value='26'><span class='sheet-archtit5'>Army</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch5' name='attr_nav' value='27'><span class='sheet-archtit5'>Navy</a><br>                             <a href="#"><input type='checkbox' class='sheet-arch5' name='attr_air' value='28'><span class='sheet-archtit5'>Airfoce</span></a><br>                             <a href="#"><input type='checkbox' class='sheet-arch5' name='attr_vet' value='29'><span class='sheet-archtit5'>Veteran</span></a><br>                         </div>                         </div>                   </div>                   </td>                            </tr>           </table>  .sheet-occ-dropbtn  {     box-shadow: 0 0 5px 1px #DADADA     background-color: #DADADA;     color: black;     padding: 2px;     font-size: 9.5px;     border: 1px solid black;     cursor: pointer;     width: 9em;     height: 27px;         } /* The container <div> - needed to position the dropdown content */ .sheet-occ-dropdown {     position: relative;     display: inline-block; } /* Dropdown Content (Hidden by Default) */ .sheet-occ-dropdown-content {     display: none;     position: absolute;     background-color: #f9f9f9;     min-width: 160px;     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);     margin-left: 10px; } /* Links inside the dropdown */ .sheet-occ-dropdown-content a {     color: black;     padding: 12px 16px;     text-decoration: none;     float: left;     display: inline-block; } /* Change color of dropdown links on hover */ .sheet-occ-dropdown-content a:hover {background-color: #A9A9A9} /* Show the dropdown menu on hover */ .sheet-occ-dropdown:hover .sheet-occ-dropdown-content {     display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .sheet-occ-dropdown:hover .sheet-occ-dropbtn{     background-color: #A9A9A9; } .sheet-arc-dropbtn  {     box-shadow: 0 0 5px 1px #DADADA     background-color: #DADADA;     color: black;     padding: 2px;     font-size: 9.5px;     border: 1px solid black;     cursor: pointer;     width: 9em;     height: 27px; } /* The container <div> - needed to position the dropdown content */ .sheet-arc-dropdown {     position: relative;     display: inline-block; } /* Dropdown Content (Hidden by Default) */ .sheet-arc-dropdown-content {     display: none;     position: absolute;     background-color: #f9f9f9;     min-width: 160px;     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } /* Links inside the dropdown */ .sheet-arc-dropdown-content a {     color: black;     padding: 12px 16px;     text-decoration: none;     float: left;     display: inline-block;      } /* Change color of dropdown links on hover */ .sheet-arc-dropdown-content a:hover {background-color: #A9A9A9} /* Show the dropdown menu on hover */ .sheet-arc-dropdown:hover .sheet-arc-dropdown-content {     display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .sheet-arc-dropdown:hover .sheet-arc-dropbtn{     background-color: #A9A9A9; } /*hide and display archtypes dependent on occupation*/ div.sheet-archdivider, div.sheet-archdivider1, div.sheet-archdivider2, div.sheet-archdivider3, div.sheet-archdivider4, div.sheet-archdivider5 {     display: none; } input.sheet-occ1[type='checkbox']:checked ~ div.sheet-archdivider {     float: middle; }
1458402265

Edited 1458402829
James
Sheet Author
I can tell you that float: middle; isn't valid CSS. &nbsp;This link shows the valid use of float: <a href="http://www.w3schools.com/cssref/pr_class_float.asp" rel="nofollow">http://www.w3schools.com/cssref/pr_class_float.asp</a> You seem to hide the archdividers fine with display: none; I don't see anything to make them visible again such as display: initial; display: inline; display: block; <a href="http://www.w3schools.com/cssref/pr_class_display.asp" rel="nofollow">http://www.w3schools.com/cssref/pr_class_display.asp</a>
I have tried all option you gave me there to make it visible but have had no luck getting it to function. eg input.sheet-occ1[type='checkbox']:checked ~ div.sheet-archdivider { &nbsp; &nbsp; display: inline; } So as you can see, even using the correct syntax my problem is still there. I know its got to be with the either the classes, names or even parent/sibling (which I am unsure of), possibly the dropdown style effecting the display, I dunno I am just not knowledgeable enough to fix it...yet. Please one of you amazingly talent individuals help me out here.&nbsp;
Well I came up with a solution and although it is not exactly what I was wanting to achieve, it is a good compromise. After a hard nights drinking and a early morning feed, I came to the conclusion that it was as I suspected, a parent/sibling problem.&nbsp; Because the checkbox I was using was to hide/show in the HTML was separated from the content I wanted to display, it was causing confusion for the CSS. I think or at least to my best knowledge, correct me if I am wrong. Solution was to get rid of the second archtype button and drop downs and slot each individual archtype under its required occupation checkbox. Then hey presto what do you know instant success.