单选按钮（复选框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 when I click the check box. I intend to add similar boxes (and later hide them) to display a few tabs of light content. Can someone please offer some aid?

Here is the html (only the first box is written):

<section class="panel clearfix skillsBox">
<div class="wizard wizard-vertical clearfix" id="wizard-2">
<ul class="steps">
  <li class="step changeSkill">
    <input type="radio" id="zskills"><label for="zskills"><span class="badge badge-info">1</span>Feel Activities</label>
  </li>
  <div class="reveal-if-active-skillsAll">
    <div class="step-pane step-content" id="all">
      <ul>
        <li>All activities in the Feel stage are listed below.<br> </li>
        <li>You can also click on each skill at the left to show activities that teach that specific skill.</li>
      </ul>
    </div>
  </div>
  <li class="step"><a href="javascript:void(0)" class="changeSkill" data-target="#Empathy" data-skill="Empathy"><span class="badge badge-info">2</span>Empathy</a></li>
    <div class="step-pane step-content" id="Empathy">
      <ul>
        <li>Ability to sense other people's emotions and thoughts, especially by imagining someone else's perspective in what they are thinking and feeling<br> </li>
        <li>Empathy allows you to truly understand how and why people are affected by the issues that surround them, and what solutions could truly impact the problem. </li>
      </ul>
    </div>
  <li class="step"><a href="javascript:void(0)" class="changeSkill" data-target="#Awareness" data-skill="Awareness"><span class="badge badge-info">3</span>Awareness</a></li>
    <div class="step-pane step-content" id="Awareness">
      <ul>
        <li>Ability to show a true understanding of yourself and others, by being conscious of your own thoughts and actions as well as of those around you</li>
        <li>It is important to be aware of the people, places, and things around you, in order to be conscious and fully sensitive to the problems that you and your community may be facing and what can be used to solve them. </li>
      </ul>
    </div>
  <li class="step"><a href="javascript:void(0)" class="changeSkill" data-target="#Engagement" data-skill="Engagement"><span class="badge badge-info">4</span>Engagement</a></li>
   <div class="step-pane step-content" id="Engagement">
    <ul>
      <li>Ability to be proactively, attentively, and passionately committed to tasks at hand as well as enthusiastic about interacting with the world around you, because you see how you fit into achieving an end goal. </li>
      <li>Engagement is critical for motivation - you care about interacting with your community and your team because you see how you are a part of it and how you can change it. </li>
    </ul>
  </div>
</ul>

Here is the CSS:

.reveal-if-active-skillsAll {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked ~ .reveal-if-active-skillsAll {
  opacity: 1;
  max-height: 100px;
  overflow: visible;
}

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.