cssの擬似クラスである:checkedを使いコンテンツが非表示される仕組みを製作したのですが、ラジオボタンの様にcheck01をクリックして隠されたコンテンツを表示し、その状態でcheck02をクリックしたらcheck01のチェックが外れ、check01のコンテツが非表示になるという仕組みをjavascriptを使い行いたいです。
コードをどのように書けば実装されるでしょうか。
よろしくお願いします。
以下にアップロードしたサイトのURLとhtml、cssのソースコードを掲載しています。
http://www.geocities.jp/jyqwc878/check/index.html
html
<body> <section> <label for="check01">check01</label> <input id="check01" type="checkbox"> <div class="panel"> <p>check01のここにテキストが入ります。</p> </div> </section> <section> <label for="check02">check02</label> <input id="check02" type="checkbox"> <div class="panel"> <p>check02のテキストが入ります。</p> </div> </section> <section> <label for="check03">check03</label> <input id="check03" type="checkbox"> <div class="panel"> <p>check03のテキストが入ります。</p> </div> </section> </body>css
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background: #0bd;
color: #FFF;
-webkit-transition: 0.1s;
transition: 0.1s;
}
label:hover {
background: #0090aa;
}
.panel {
-webkit-transition: .3s ease;
transition: .3s ease;
height: 0;
overflow: hidden;
background: #F5F0CF;
margin-top: 10px;
padding: 0;
border-radius: 5px;
}
input:checked + .panel {
height: auto;
padding: 15px;
}
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/12 12:32