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}
回答2件
あなたの回答
tips
プレビュー