HTML、CSSを使用してアコーディオンを作成させたいです。

ここに質問の内容を詳しく書いてください。
（例）HTMLとCSSでアコーディオンを作成していますが、。
折り畳むことはできましたが、そこからクリックしてもメニューを表示させることができません。(div class="line_class"から下の部分)
また、エラーは出ていません。
クラス名、綺麗なコードで無く申し訳ありません...

該当のソースコード

HTML5
1<div class="ac-container">
2    <label class="box_class" for="ac-1">くだものカテゴリー1 ▼</label>
3    <input type="checkbox" id="label1" class="cssacc" />
4<div class="line_class">
5    <div class="guide_class">りんご</div><div class="textbox_class"><input type="text" name="name"style="width:200px;"><br></div>
6    <div class="guide_class">もも</div><div class="textbox_class"><input type="text" name="name"><br></div>
7    <div class="guide_class">なし</div><div class="textbox_class"><input type="text" name="name"><br></div>
8    <div class="guide_class">すいか</div><div class="textbox_class"><select class="select_class">
9        <option value=""></option>
10        <option value="saikou"></option>
11        <option value="botiboti"></option>
12        </select></div>
13</div>
14</div>

該当のソースコード

CSS
1.ac-container{
2  margin: auto;
3}
4.guide_class{
5  text-align: right;
6  margin-right: 1072px;
7  font-family:'monospace';
8  font-size: 16px;
9  color: #0f2350;
10}
11.box_class{
12  font-size: 1.2em;
13  font-size: 15px;
14  background-color:#8491c3; /* タイトル背景色 */
15  border: 1px solid #999999; /* タイトル枠線 */
16  padding: 2px 10px;
17  height: 26px;
18  color: #fff; /* タイトル色 */
19  margin-top: 28px;
20  border-radius: 5px 5px 0 0;
21}
22.textbox_class{
23  margin-left: 227px;
24  margin-top: -23px;
25  margin-bottom: 10px;
26}
27.line_class{
28  text-align:left;
29  padding: 10px;
30  margin-top: -1px;
31  border: 1px solid #bbb;
32  background-color:#f5f5f5;
33  border-radius: 0px 0px 5px 5px;
34}
35.ac-container label {
36  display: block;
37  cursor :pointer;
38  transition: all 0.5s;
39}
40.ac-container label:hover {
41  background :#85baef;
42}
43.ac-container input {
44  display: none;
45}
46.ac-container .line_class {
47  height: 0;
48  padding: 0;
49  overflow: hidden;
50  opacity: 0;
51  transition: 0.8s;
52}
53.cssacc:checked + .line_class {
54  height: auto;
55  opacity: 1;
56}

m.ts10806

2019/01/17 08:08

参考にされたのは下記のサイトですかね。 https://saruwakakun.com/html-css/reference/accordion そもそもこのサイトでかかれたことそのままは実現できたのでしょうか？

m.ts10806

2019/01/17 08:10

一応回答はしますね。

行動規範の内容に同意します

回答2件

label要素に設定しているfor属性の値と、input要素に設定しているid属性の値が一致していないため、label要素をクリックしてもinput要素が反応していないため、そのような問題が発生しています。HTML を以下のように修正してみてください(動作確認用リンク)。

HTML
1<div class="ac-container">
2  <label class="box_class" for="ac-1">くだものカテゴリー1 ▼</label>
3  <input type="checkbox" id="ac-1" class="cssacc" />
4  <div class="line_class">
5    <div class="guide_class">りんご</div>
6    <div class="textbox_class"><input type="text" name="name" style="width:200px;"><br></div>
7    <div class="guide_class">もも</div>
8    <div class="textbox_class"><input type="text" name="name"><br></div>
9    <div class="guide_class">なし</div>
10    <div class="textbox_class"><input type="text" name="name"><br></div>
11    <div class="guide_class">すいか</div>
12    <div class="textbox_class">
13      <select class="select_class">
14        <option value=""></option>
15        <option value="saikou"></option>
16        <option value="botiboti"></option>
17        </select>
18    </div>
19  </div>
20</div>