teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ボタンを押すとさらにボタンが出てくる階層構造

編集履歴

質問編集履歴

3

CSS追加

2020/01/09 07:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -98,7 +98,85 @@
98
98
 
99
99
  ```
100
100
 
101
+ ```CSS
101
102
 
103
+ .hidden_box {
104
+
105
+ margin: 2em 0;
106
+
107
+ padding: 0;
108
+
109
+ }
110
+
111
+
112
+
113
+
114
+
115
+ .hidden_box label {
116
+
117
+ padding: 15px;
118
+
119
+ font-weight: bold;
120
+
121
+ border: solid 2px black;
122
+
123
+ cursor :pointer;
124
+
125
+ }
126
+
127
+
128
+
129
+
130
+
131
+ .hidden_box label:hover {
132
+
133
+ background: #efefef;
134
+
135
+ }
136
+
137
+
138
+
139
+
140
+
141
+ .hidden_box input {
142
+
143
+ display: none;
144
+
145
+ }
146
+
147
+
148
+
149
+
150
+
151
+ .hidden_box .hidden_show {
152
+
153
+ height: 0;
154
+
155
+ padding: 0;
156
+
157
+ overflow: hidden;
158
+
159
+ opacity: 0;
160
+
161
+ transition: 0.8s;
162
+
163
+ }
164
+
165
+
166
+
167
+
168
+
169
+ .hidden_box input:checked ~ .hidden_show {
170
+
171
+ padding: 10px 0;
172
+
173
+ height: auto;
174
+
175
+ opacity: 1;
176
+
177
+ }
178
+
179
+ ```
102
180
 
103
181
 
104
182
 

2

コード修正

2020/01/09 07:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -22,9 +22,7 @@
22
22
 
23
23
  ### コード
24
24
 
25
-
25
+ ```HTML
26
-
27
-
28
26
 
29
27
  <!DOCTYPE html>
30
28
 
@@ -36,12 +34,6 @@
36
34
 
37
35
  <title>clicktest</title>
38
36
 
39
-
40
-
41
-
42
-
43
-
44
-
45
37
  </head>
46
38
 
47
39
 
@@ -49,10 +41,6 @@
49
41
 
50
42
 
51
43
  <body>
52
-
53
-
54
-
55
-
56
44
 
57
45
  <div class="hidden_box">
58
46
 
@@ -62,11 +50,7 @@
62
50
 
63
51
  <div class="hidden_show">
64
52
 
65
-
66
-
67
-
68
-
69
-
53
+
70
54
 
71
55
  <p>
72
56
 
@@ -112,6 +96,12 @@
112
96
 
113
97
 
114
98
 
99
+ ```
100
+
101
+
102
+
103
+
104
+
115
105
  ### 補足情報（FW/ツールのバージョンなど）
116
106
 
117
107
 

1

文法の修正

2020/01/09 07:17

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,9 @@
20
20
 
21
21
 
22
22
 
23
- ### 該当のソースコード
23
+ ### コード
24
+
25
+
24
26
 
25
27
 
26
28
 
@@ -36,37 +38,77 @@
36
38
 
37
39
 
38
40
 
39
-
40
41
 
41
- <script language="JavaScript">
42
-
43
- function sampleCreateElement() {
44
-
45
- var $sampleButton = document.createElement( "BUTTON" );
46
-
47
- $sampleButton.textContent = "B";
48
-
49
- document.getElementById( "sample" ).appendChild( $sampleButton );
50
-
51
- }
52
-
53
- </script>
54
42
 
55
43
 
56
44
 
57
45
  </head>
58
46
 
47
+
48
+
49
+
50
+
59
51
  <body>
60
52
 
61
- <button onclick="sampleCreateElement();">A</button>
62
53
 
63
- <div id="sample" style="margin: 1em;"></div>
64
54
 
55
+
56
+
57
+ <div class="hidden_box">
58
+
59
+ <label for="label1">A</label>
60
+
61
+ <input type="checkbox" id="label1"/>
62
+
63
+ <div class="hidden_show">
64
+
65
+
66
+
67
+
68
+
69
+
70
+
71
+ <p>
72
+
73
+
74
+
75
+ <div class="hidden_box">
76
+
77
+ <label for="label12">B</label>
78
+
79
+ <input type="checkbox" id="label12"/>
80
+
81
+ <div class="hidden_show">
82
+
83
+
84
+
85
+ <div class="hidden_box">
86
+
87
+ <label for="label13">B'</label>
88
+
89
+ <input type="checkbox" id="label13"/>
90
+
91
+ <div class="hidden_show">
92
+
93
+
94
+
95
+ </p>
96
+
97
+
98
+
99
+
100
+
101
+ </div>
102
+
103
+ </div>
104
+
105
+ <br>
106
+
107
+
108
+
65
- </body>
109
+ </body>
66
110
 
67
111
  </html>
68
-
69
-
70
112
 
71
113
 
72
114