以下のようなアコーディオンメニューを作っているのですが
「もっと見る」をクリックした時に「もっと見る」を非表示にし、隠れている中身(Helloの部分)の下に「閉じる」と表示させ、その「閉じる」をクリックすると、再び中身(Helloの部分)が隠れて「もっと見る」が出現するような(デフォルトの状態)アコーディオンが作りたいのですが、どうすれば作れますでしょうか?
jQuelyでもJSでもいいので、何か作れるコードがあればご教授ください。
hmtl
1<div class="accbox"> 2 3 4 <label for="label1">もっと見る</label> 5 <input type="checkbox" id="label1" class="cssacc" /> 6 <div class="accshow"> 7 8 <h1>Hello</h1> 9 10 </div> 11 12 13</div>
css
1h.accbox { 2 margin: 2em 0; 3 padding: 0; 4 max-width: 400px;/*最大幅*/ 5} 6 7/*ラベル*/ 8.accbox label { 9 display: block; 10 margin: 1.5px 0; 11 padding : 11px 12px; 12 color :#2f8fcf; 13 font-weight: bold; 14 background :#a4cbf3; 15 cursor :pointer; 16 transition: all 0.5s; 17} 18 19/*ラベルホバー時*/ 20.accbox label:hover { 21 background :#85baef; 22} 23 24/*チェックは隠す*/ 25.accbox input { 26 display: none; 27} 28 29/*中身を非表示にしておく*/ 30.accbox .accshow { 31 height: 0; 32 padding: 0; 33 overflow: hidden; 34 opacity: 0; 35 transition: 0.8s; 36} 37 38/*クリックで中身表示*/ 39.cssacc:checked + .accshow { 40 height: auto; 41 padding: 5px; 42 background: #eaeaea; 43 opacity: 1; 44}
回答1件
あなたの回答
tips
プレビュー