I’m trying to show/hide some content just using CSS and radio buttons. I found something on Stack Overflow that does the trick
https://jsfiddle.net/LLornfn8/
However, I need to wrap my radios in some divs to handle some general styling which means the original JSFiddle code breaks, for example:
#input_description:checked ~ #contentDescription, #input_shipping:checked ~ #contentShipping {
display: block;
}
#contentDescription, #contentShipping{
display: none;
}
.radio_item_menu:checked + .label_item_menu {
font-weight: bold;
}
<div id="radioGroup">
<div class="myRadioStyle">
<input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
<label for="input_description" class="label_item_menu">Description</label>
</div>
<div class="myRadioStyle">
<input type="radio" name="navbar_menu_store" id="input_shipping" class="radio_item_menu">
<label for="input_shipping" class="label_item_menu">Shipping</label>
</div>
</div>
<div id="contentDescription"><p class="testo_scheda">
This is some text</p>
</div>
<div id="contentShipping"><p class="testo_scheda">
This is some other text</p>
</div>
I’m not that familiar with selectors like ~. I am wondering if there is still a way to make this work?
I’ve looked around on Stack Overflow and found a few similar things but they all seem to handle it much like the original example rather than if objects are nested differently. I’ve tried playing around with different selectors to try to target the hidden divs but I still can’t get it to work. Nothing ever shows when you make the selections.
2
Answers
With your actual HTML structure, the pseudo class
:has()
would be helpfull, unfortunately it is not yet well implemented. Firefox fails at this time. https://developer.mozilla.org/en-US/docs/Web/CSS/:hasHere is the theorize example to test elsewhere than in Firefox
(below this snippet, two other snippet working everywhere requiring to modify HTML – last snippet should be what you look for)
For firefox and older browser , inputs need to be adjacent (and ahead in the flow) to the elements to hide (or its parent)
So for Firefox, at this time, you need to take the input outside their container , so they are adjacent to the element to hide , or at least a parent of these element.
Firefox version could be
Another option could also be to take the input only outside and recreate them from a pseudo attached to the labels
Here is another options to keep your containers
You can always use Javascript also. That will allow you to modify your HTML with little changes needed for the javascript to continue to work.
For my Javascript based answer, I gave your content divs a class called content div that will allow the CSS to easily be modified as well as javascript calls. I also created an active class that changes the display to block.
Each of the radio buttons I gave a data attribute of target. This will reference the div for that radio.
Then I simply give each radio a change event listener. And I look for an active div and remove the class then add the active class to the target div for the radio.