I've made a CSS grid container layout but I'm unable to swap the visible contents of a particular section of the grid. My original thought was it might be the CSS conflicting but when I isolated the content and put a single <div> tag around it, it vanished. Is there a way to make hidden content that's nested inside of a div element? HTML
<!-- radio button test -->
<input type="radio" name="attr_weapon_type" value="1" class="sheet-selected1" checked>
<input type="radio" name="attr_weapon_type" value="2" class="sheet-selected2">
<!-- the two div boxes in question, putting a single div element around these two elements makes them dissapear as well -->
<div class="sheet-weapon_smg-Container sheet-tab-content sheet-tab2"style="background-position:25px 20px; background-size: 520px;">
bbbbbbbbbbbbbbbbbb
</div>
<div class="sheet-weapon_rifle-Container sheet-tab-content sheet-tab1"style="background-position:25px 20px; background-size: 520px;">
aaaaaaaaaaaaaaaaaa
</div>
<h1>Rifle Grid</h1>
<div class="sheet-grid-container">
<div class="combat-item1">attack</div>
<div class="combat-item2">overwatch</div>
<div class="combat-item3">suppress</div>
<div class="combat-item4">throwable</div>
<div class="combat-item5">reload</div>
<div class="combat-item6">health</div>
<div class="combat-item7">cover_m</div>
<div class="combat-item8">type_w<br>
<br>
<select class="sheet-weaponOption" name="attr_weapon_type">
<option value="1"> Rifle </option>
<option value="2"> SMG </option>
</select></div>
<div class="combat-item9">bonuses</div>
<div class="combat-item10">swap</div>
<div class="combat-item11" style="align-content: center;">
<!-- when placed in this div element it is no longer visible -->
</div>
<div class="combat-item12">heal</div>
<div class="combat-item13">scan</div>
<div class="combat-item14">intimidate</div>
<div class="combat-item15">standing</div>
<div class="combat-item16">prone</div>
<div class="combat-item17">abilities</div>
<div class="combat-item18">ability_1</div>
<div class="combat-item19">ability_2</div>
<div class="combat-item20">ability_3</div>
<div class="combat-item21">ability_4</div>
</div> CSS div.sheet-tab-content { display: none; }
input.sheet-selected1:checked ~ div.sheet-tab1,
input.sheet-selected2:checked ~ div.sheet-tab2 { display: block; }
.sheet-hidden {
display: none;
}
.sheet-hider:not(:checked) + div {
display: none;
}
.sheet-grid-container {
display: grid;
grid-gap: 5px;
background-color: rgba(0, 255, 0, 0.2);
padding: 10px;
grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px;
grid-template-rows: 80px 80px 80px 80px 80px 80px;
grid-template-areas:
"attack attack overwatch suppress throwable reload reload health cover_m"
"type_w type_w bonuses bonuses bonuses swap swap health cover_m"
"weapon weapon weapon weapon weapon weapon weapon heal scan"
"weapon weapon weapon weapon weapon weapon weapon heal intimidate"
"weapon weapon weapon weapon weapon weapon weapon standing prone"
"abilities ability_1 ability_1 ability_2 ability_2 ability_3 ability_3 ability_4 ability_4";
}
.sheet-grid-container > div {
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
padding: 0px 0;
font-size: 1em;
}
.sheet-combat-item1 {
grid-area: attack;
}
.sheet-combat-item2 {
grid-area: overwatch;
}
.sheet-combat-item3 {
grid-area: suppress;
}
.sheet-combat-item4 {
grid-area: throwable;
}
.sheet-combat-item5 {
grid-area: reload;
}
.sheet-combat-item6 {
grid-area: health;
}
.sheet-combat-item7 {
grid-area: cover_m;
}
.sheet-combat-item8 {
grid-area: type_w;
}
.sheet-combat-item9 {
grid-area: bonuses;
}
.sheet-combat-item10 {
grid-area: swap;
}
.sheet-combat-item11 {
grid-area: weapon;
}
.sheet-combat-item12 {
grid-area: heal;
}
.sheet-combat-item13 {
grid-area: scan;
}
.sheet-combat-item14 {
grid-area: intimidate;
}
.sheet-combat-item15 {
grid-area: standing;
}
.sheet-combat-item16 {
grid-area: prone;
}
.sheet-combat-item17 {
grid-area: abilities;
}
.sheet-combat-item18 {
grid-area: ability_1;
}
.sheet-combat-item19 {
grid-area: ability_2;
}
.sheet-combat-item20 {
grid-area: ability_3;
}
.sheet-combat-item21 {
grid-area: ability_4;
}
/*-----------------------Rifle-----------------------*/
.sheet-weapon_rifle-Container{
background-image: url('<a href="https://i.imgur.com/kQEdjib.png" rel="nofollow">https://i.imgur.com/kQEdjib.png</a>');
width: 720px;
height: 240px;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: contain;
display: grid;
grid-gap: 5px;
background-color: rgba(0, 0, 255, 0.5);
padding: 5px;
background-position: center;
}
.sheet-weapon_rifle-Container > div {
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
padding: 0px;
font-size: 1em;
}
.sheet-weaponOption {
border-radius:20px;
height: 30px;
width: 160px;
background: rgba(256,256,256,0.55);
}
/*-----------------------Rifle-----------------------*/
.sheet-weapon_smg-Container{
background-image: url('<a href="https://i.imgur.com/RTTnir8.png" rel="nofollow">https://i.imgur.com/RTTnir8.png</a>');
width: 720px;
height: 240px;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: contain;
display: grid;
grid-gap: 5px;
background-color: rgba(0, 0, 255, 0.5);
padding: 5px;
background-position: center;
}
.sheet-weapon_smg-Container > div {
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
padding: 0px;
font-size: 1em;
}