teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問bootstrap4 を使ってアコーディオンを左右に広げる

編集履歴

質問編集履歴

4

追記

2018/08/28 03:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  <div>
66
66
 
67
- <label>ラベル</label><input type="checkbox"><span class="collapse">サブ見出し</span>
67
+ <label>ラベル</label><input type="checkbox" id="id"><span class="collapse">サブ見出し</span>
68
68
 
69
69
  <div class="collapse">コンテンツ</div>
70
70
 
@@ -78,9 +78,9 @@
78
78
 
79
79
  & { display:none; }
80
80
 
81
- & ~ *:checked { display:block; }
81
+ &:checked~ * { display:block; }
82
82
 
83
- & ~ *:not(:checked) { display:none; }
83
+ &:not(:checked) ~ * { display:none; }
84
84
 
85
85
  }
86
86
 

3

追記

2018/08/28 03:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  <div>
66
66
 
67
- <a>ラベル</a><input type="checkbox"><span class="collapse">サブ見出し</span>
67
+ <label>ラベル</label><input type="checkbox"><span class="collapse">サブ見出し</span>
68
68
 
69
69
  <div class="collapse">コンテンツ</div>
70
70
 

2

追記

2018/08/28 03:29

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -58,7 +58,7 @@
58
58
 
59
59
 
60
60
 
61
- ｈｉｄｄｅｎ　ｃｈｅｃｋｂｏｘ　をつかって
61
+ hidden checkbox をつかって
62
62
 
63
63
  ```
64
64
 

1

追記

2018/08/28 03:29

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,4 +42,48 @@
42
42
 
43
43
 
44
44
 
45
+
46
+
47
+ 追記：
48
+
49
+
50
+
51
+ bootstrap って
52
+
53
+ href="#id"
54
+
55
+ data-target="#id"
56
+
57
+ で 1 つの要素しか表示変更できないんでしょうか
58
+
59
+
60
+
61
+ ｈｉｄｄｅｎ　ｃｈｅｃｋｂｏｘ　をつかって
62
+
63
+ ```
64
+
45
- よろしくおねがいします
65
+ <div>
66
+
67
+ <a>ラベル</a><input type="checkbox"><span class="collapse">サブ見出し</span>
68
+
69
+ <div class="collapse">コンテンツ</div>
70
+
71
+ </div>
72
+
73
+ ```
74
+
75
+ ```
76
+
77
+ input[type=checkbox]#id {
78
+
79
+ & { display:none; }
80
+
81
+ & ~ *:checked { display:block; }
82
+
83
+ & ~ *:not(:checked) { display:none; }
84
+
85
+ }
86
+
87
+ ```
88
+
89
+ みたいに複数要素を出現できればいいんですけどね…