CSS ラジオ ボタン ハックを使用して非表示の div を表示しようとしていますが、クリックしても表示されません。以下の現在のコードでは非表示になっており、チェック ボックスをクリックしても何も起こりません。同様のボックスを追加して（後で非表示にして）、軽いコンテンツのいくつかのタブを表示するつもりです。誰か助けてくれませんか？
これがhtmlです（最初のボックスのみが書かれています）：
<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>
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;
}