How to hide/show divs with Radio buttons with ONLY CSS

Question

I want to show/hide divs with ONLY css radio buttons. When group1 is checked I want the "test class" to change. This works fine when i remove the nav-bar div, but I need that for test purposes. Can i still use the "checked" for different level divs. i have tested with all > + and ~ but this doesnt work. please help.

.bingo-box-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.bingo-box {
  display: flex;
  flex-direction: column;
  width: 30%;
  margin: 30px 0px;
  position: relative;
  background-color: #000;
}

.bingo-box-img img {
  width: 100%;
  height: 100%;
}

.bingo-box-text {
  font-size: 40px;
  line-height: 1;
  color: #fff;
  position: absolute;
  top: 50%;
}

.bingo-box-text h2 {
  color: #fff;
  font-size: 40px;
  line-height: 1;
}

.bingo-box-text p {
  font-size: 20px;
}

.i-icon {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 80px;
  background: #fff;
  border: 1px solid black;
  width: 30px;
  height: 40px;
}

.hover-it {
  opacity: 0;
}

.i-icon:hover~.hover-it {
  opacity: 1;
}

.i-icon:hover~.bingo-box-img {
  opacity: 0.5;
  background: #000;
}

.i-icon:hover .bingo-box {}

.bingo-box-cta {
  background: #fff;
}

input {
  display: none;
}

.bingo-box {
  display: none;
}

#group1:checked~.bingo-box-container .test,
#group1:checked+.bingo-box-container .test,
#group1:checked>.bingo-box-container .test {
  display: block;
}

label {
  background: red;
  width: 100px;
  display: blo
}

<div class="bingo-box-wrapper">
<div class="nav-bar">
    <label for="group1"> group one</label>
    <label for="group2"> group two</label>
    <input id="group1" name="group" type="radio" />
    <input id="group2" name="group" type="radio" />
</div>
<div class="bingo-box-container">
    <div class="bingo-box">
        <div class="bingo-box-img">
            <img alt="" src="/library/2021/promotions/winners/large-2021_06_TypoKaraStepNow.jpg" />
        </div>
        <div class="bingo-box-cta">
            <a class="btn action btn_type_extended-real-play" href="/promotions/welcome-offer" target="_self">More Info</a>
        </div>
    </div>
    <div class="bingo-box test">
        <div class="bingo-box-img">
            <img alt="" src="/library/2021/promotions/may/winners/big.jpg" />
        </div>
        <div class="bingo-box-cta">
            <a class="btn action btn_type_extended-real-play" href="/promotions/welcome-offer" target="_self">More Info</a>
        </div>
    </div>
    <div class="bingo-box">
        <div class="bingo-box-img">
            <img alt="" src="/library/2020/winners/20aug/sambud12_yellow.jpg" />
        </div>
        <div class="bingo-box-cta">
            <a class="btn action btn_type_extended-real-play" href="/promotions/welcome-offer" target="_self">More Info</a>
        </div>
    </div>
    <div class="bingo-box test">
        <div class="bingo-box-img">
            <img alt="" src="/library/2021/promotions/winners/large-2021_06_TypoKaraStepNow.jpg" />
        </div>
        <div class="bingo-box-cta">
            <a class="btn action btn_type_extended-real-play" href="/promotions/welcome-offer" target="_self">More Info</a>
        </div>
    </div>
    <div class="bingo-box">
        <div class="i-icon">
            &nbsp;
        </div>
        <div class="bingo-box-img">
            <img alt="" src="/library/2021/promotions/winners/large-2021_06_TypoKaraStepNow.jpg" />
        </div>
        <div class="bingo-box-text hover-it">
            <h2>BINGO ROOM</h2>
            <p>Info here</p>
            <p>info here</p>
        </div>
        <div class="bingo-box-cta">
            <a class="btn action btn_type_extended-real-play" href="/promotions/welcome-offer" target="_self">More Info</a>
        </div>
    </div>
    <div class="bingo-box">
        <div class="bingo-box-img">
            <img alt="" src="/library/2022/promotion/test/Capture.PNG" />
        </div>
        <div class="bingo-box-text">
            <h2>BINGO ROOM</h2>
            <p>Info here</p>
            <p>info here</p>
        </div>
        <div class="bingo-box-cta">
            <a class="btn action btn_type_extended-real-play" href="/promotions/welcome-offer" target="_self">More Info</a>
        </div>
    </div>
</div>

If i'm correct, you can not go up in css. So if your css rule is in `.nav-bar` class you can not select parent element in css. So unless you put `.test` in the same parent element as radio buttons this can not be achieved by css alone. See https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Sergiy T., Sep 01 '22 at 08:59
Why is CSS only important? JavaScript will really be your best friend when it comes to this as it will make it much easier, more readable, and more maintainable (maybe personal opinion on the latter) than CSS only can achieve — Can O' Spam, Sep 01 '22 at 09:00
Many thanks for your help. The use of Javascript is limited on what I am using, so I wanted to achieve this with css .Appreciate your comments — Lee, Sep 01 '22 at 09:01
"The use of Javascript is limited on what I am using" - can you elaborate? Using JavaScript libraries (jQuery for example) can't be done, or you just can't use JavaScript generally? Because if it's a library issue, this can be done using raw JS — Can O' Spam, Sep 01 '22 at 09:08
As an example using raw JS (and this is only a very basic starter), please see [this fiddle](https://jsfiddle.net/c8axLbe9/) — Can O' Spam, Sep 01 '22 at 09:21

How to hide/show divs with Radio buttons with ONLY CSS

0 Answers0