いつもお世話になっております。
前回、こちらの質問にて、『一つのページの中で複数実現したいのですが、2つ以上の「もっと読む」を実装すると、2つめのボタンを押しても1つめのものが反応してしまいます。』とご質問させていただいたのですが、実際には、1つめのボタンを押して、すべての<ul>タグで囲まれた全ての「もっと読む」以下が動くようにしたいと考えています。
試してみたこととして、accordion-boxクラス以下を全て囲んでみたりしてみたのですが、デザインが崩れてしまうばかりでした。CSSだけで難しければ、jQueryを使うのもありだと考えています。
初心者で申し訳ありませんが、お助けくださいませ。。。
HTML
1<ul> 2 <li> 3 <div class="accordion-box"> 4 <input id="ac00" type="checkbox"> 5 <label for="ac00"></label> 6 <div class="accordion-container"> 7 <h3>タイトル</h3> 8 <p>世界中どこを探してもなかったので作りました。</p> 9 <p>jsを使っていないのでコンフリクトすることはありません。</p> 10 <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p> 11 <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p> 12 </div><!— accordion-container --> 13 </div><!— accordion-box --> 14 </li> 15 16 <li> 17 <div class="accordion-box"> 18 <input id="ac01" type="checkbox"> 19 <label for="ac0"></label> 20 <div class="accordion-container"> 21 <h3>タイトル</h3> 22 <p>世界中どこを探してもなかったので作りました。</p> 23 <p>jsを使っていないのでコンフリクトすることはありません。</p> 24 <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p> 25 <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p> 26 </div><!— accordion-container --> 27 </div><!— accordion-box --> 28 </li> 29 30 <li> 31 <div class="accordion-box"> 32 <input id="ac02" type="checkbox"> 33 <label for="ac02"></label> 34 <div class="accordion-container"> 35 <h3>タイトル</h3> 36 <p>世界中どこを探してもなかったので作りました。</p> 37 <p>jsを使っていないのでコンフリクトすることはありません。</p> 38 <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p> 39 <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p> 40 </div><!— accordion-container --> 41 </div><!— accordion-box --> 42 </li> 43</ul>
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}
回答1件
あなたの回答
tips
プレビュー