いつもお世話になっております。
こちらの記事を参考にして、CSSのみで「もっと読む」機能を実装したいと考えています。
困っているのは、これを一つのページの中で複数実現したいのですが、2つ以上の「もっと読む」を実装すると、2つめのボタンを押しても1つめのものが反応してしまいます。
これをそれぞれに対応するためにはどうすればよろしいでしょうか?
html
1<div class="accordion-box"> 2 <input id="ac00" type="checkbox"> 3 <label for="ac00"></label> 4 <div class="accordion-container"> 5 <h3>タイトル</h3> 6 <p>世界中どこを探してもなかったので作りました。</p> 7 <p>jsを使っていないのでコンフリクトすることはありません。</p> 8 <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p> 9 <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p> 10 </div><!— accordion-container --> 11</div><!— accordion-box -->
CSS
1.accordion-box { 2 position: relative; 3} 4.accordion-box label { 5 height: 140px; /* グラデーションの高さ */ 6 cursor: pointer; 7 text-align: center; 8 font-size: 12px; 9 position: absolute; 10 bottom: 0; 11 width: 100%; 12 13 /* 以下グラデーションは「背景が白」に併せて設定しています */ 14 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%); 15 background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%); 16 background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%); 17 background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%); 18 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%); 19} 20.accordion-box input:checked + label { 21 background: inherit; /* 開いた時には背景グラデーションを消す */ 22} 23.accordion-box label:after { 24 content: "続きをよむ"; /* ラベルの文字 */ 25 letter-spacing: .05em; 26 line-height: 2.5rem; 27 position: absolute; 28 bottom: 20px; 29 left: 50%; 30 -webkit-transform: translate(-50%, 0); 31 transform: translate(-50%, 0); 32 color: #fff; 33 background-color: #000; 34 width: 18.75rem; 35 -webkit-border-radius: 20px; 36 -moz-border-radius: 20px; 37 border-radius: 20px; 38} 39.accordion-box label:before { 40 content: "↓"; 41 font-weight: 700; 42 position: absolute; 43 bottom: 30px; 44 left: 50%; 45 -webkit-transform: translate(-140px, 0); 46 transform: translate(-140px, 0); 47 background-color: #fff; 48 z-index: 1; 49 -webkit-border-radius: 100%; 50 -moz-border-radius: 100%; 51 border-radius: 100%; 52 width: 20px; 53 height: 20px; 54 line-height: 20px; 55} 56.accordion-box input { 57 display: none; 58} 59.accordion-box .accordion-container { 60 overflow: hidden; 61 height: 200px; /* 開く前に見えている部分の高さ */ 62 -webkit-transition: all 0.1s; 63 -moz-transition: all 0.1s; 64 -ms-transition: all 0.1s; 65 -o-transition: all 0.1s; 66 transition: all 0.1s; 67} 68 69 70.accordion-box input:checked + label { 71 /* display: none ; 閉じるボタンは要らないとき */ 72} 73.accordion-box input:checked + label:after { 74 content: "閉じる"; 75} 76.accordion-box input:checked + label:before { 77 content: "↑"; 78} 79.accordion-box input:checked ~ .accordion-container { 80 height: auto; 81 padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */ 82 -webkit-transition: all 0.1s; 83 -moz-transition: all 0.1s; 84 -ms-transition: all 0.1s; 85 -o-transition: all 0.1s; 86 transition: all 0.1s; 87}
「2つ以上」のHTMLを提示ください。
回答2件
あなたの回答
tips
プレビュー