teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

情報の追加。

2017/04/13 17:18

投稿

kei344
kei344

スコア69625

answer CHANGED
@@ -35,4 +35,31 @@
35
35
  });
36
36
 
37
37
  $( '.checked-show' ).hide();
38
- ```**動くサンプル:**[https://jsfiddle.net/hrr3bmtf/](https://jsfiddle.net/hrr3bmtf/)
38
+ ```**動くサンプル:**[https://jsfiddle.net/hrr3bmtf/](https://jsfiddle.net/hrr3bmtf/)
39
+
40
+ ---
41
+
42
+ CSS版。
43
+
44
+ ```HTML
45
+ <div class="test">
46
+ <input type="radio" name="radio" id="radio1"><label for="radio1">ラジオ1</label>
47
+ <div class="checked-show">
48
+ <p>サンプルテキスト</p>
49
+ </div>
50
+ </div>
51
+ <div class="test">
52
+ <input type="radio" name="radio" id="radio2"><label for="radio2">ラジオ2</label>
53
+ <div class="checked-show">
54
+ <p>サンプルテキスト</p>
55
+ </div>
56
+ </div>
57
+ ```
58
+ ```CSS
59
+ .checked-show {
60
+ display: none;
61
+ }
62
+ [name="radio"]:checked + label + .checked-show {
63
+ display: block;
64
+ }
65
+ ```**動くサンプル:**[https://jsfiddle.net/ffyozfxz/](https://jsfiddle.net/ffyozfxz/)