radio button (checkbox hack)

Question

I\'m trying to use the CSS radio button hack to reveal a hidden div, but I cannot get it to appear when clicked. With the current code below it is hidden, and nothing happens w

Answer 1

What you are doing

You are using a general sibling ~ selector. Find more information about it here:

http://www.sitepoint.com/web-foundations/general-sibling-selector-css-selector/

Why it doesn't work

input[type="radio"]:checked ~ .reveal-if-active-skillsAll works for a DOM structure where .reveal-if-active-skillsAll is a sibling of your radiobutton. There is no way to make it work if .reveal-if-active-skillsAll has a parent element different from your radio button's parent element.

A small warning: Possible unintended side effects

Also, please be aware that ~ .reveal-if-active-skillsAll will select all sibling .reveal-if-active-skillsAll, not only the next.

To select only the next, use the adjacent sibling selector +. This requires your .reveal-if-active-skillsAll to follow directly after your radio button in the markup.

http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/

Learn to properly use markup according to the existing rules!

Please also note that the only direct child element that is allowed in an unordered list <ul> (as well as an ordered list <ol>) is <li>.

How to solve it - and avoid issues like this in the future

Don't just copy "hacks" which you do not understand - it will almost always have undesired consequences at some point which you will be unable to a) foresee and b) fix. So read this answer, read what can be found behind the links I posted, and understand what you are doing.