I have managed to create a CSS-based method for toggling the visibility of span or input elements depending on whether a radio button is checked. I got inspired by this insightful question on Stack Overflow.
However, I encountered an issue where this toggle effect stops working as soon as I apply a jQueryUI spinner format.
In this jsFiddle demo, you can see that the CSS works perfectly fine for the span element but not for the input. In fact, applying the spinner causes the entire input to disappear.
Can anyone shed some light on why this is happening and offer insights on how to maintain the visibility toggle using CSS?
Below is the CSS code snippet used in the fiddle:
/* Control visibility of SPAN and INPUT (with jqueryui spinner class)
cf. https://stackoverflow.com/questions/21269376/radio-button-show-hide-content
*/
/*The span works fine*/
span#some-text {
display:none;
}
input#on-input:checked ~ span#some-text{
display:inline;
}
input#systematic-input:checked ~ span#some-text{
display:none;
}
/*The input is only visible when the spinner format isn't applied (i.e. commenting all CSS below this point). Even so, the hide/show effect doesn't work. Why?*/
/*
input#spinner-on {
display:none;
}
input#on-input:checked ~ input#spinner-on{
display:inline;
}
input#off-input:checked ~ input#spinner-on{
display:none;
}
*/