WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › チャットでお問合せさせていただいて解決しなかったwidgetの修正についてです
-
チャットでお問合せさせていただいて解決しなかったwidgetの修正についてです
トピックス by アドマ_リスアカ6 127 pt 2024年1月4日 17:45 184 PV新年あけましておめでとうございます。本年もよろしくお願い致します。
今回のご相談内容は、「シンプルデザインの開閉する目次※要javascript(表)」の開閉を「1回だけ開く目次※要javascript」の様な開閉にしたいのですがコードの変更についてご教授いただけますでしょうか。具体的な内容としては、「1回だけ開く目次※要javascript」で全部みるボタンを押すと隠れているものが開閉され、全ての目次が見えるようになります。しかし、「シンプルデザインの開閉する目次※要javascript(表)」の方は、全て見えるか全て見えないかの二択なので「1回だけ開く目次※要javascript」と同様にできるようによろしくお願い致します。
-
8 コメント
-
ベストアンサー
お待たせいたしました!
コードをお渡しいたします!
よろしくお願いします!
JavaScript head
<script> var tocAccordion = tocAccordion || {}; (function(_) { const target = '.js-tocAccordion'; _.accordionOpen = function(el) { let toc = el.querySelector('.js-tocAccordionInner'); let btn = el.querySelector('.js-btn'); btn.addEventListener('click', function() { btn.classList.add('is-hidden'); toc.classList.remove('is-hide'); }) }; _.init = function() { Array.from(document.querySelectorAll(target), el => { _.accordionOpen(el); }) }; })(tocAccordion); </script>
JavaScript body
<script> document.addEventListener('DOMContentLoaded', tocAccordion.init, false); </script>
HTML
<div class="tocAccordion__area js-tocAccordion"> <div class="tocAccordion__inner js-tocAccordionInner is-hide"> <p class="tocHead">Contents <span class="allView__btn js-btn">全部見る ▼</span></p> <ul class="tocLists"> <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li> <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li> <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li> <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li> </ul> </div> </div>
CSS
p { margin: 0; } ul { list-style: none; padding-left: 0; } a { text-decoration: none; } .tocAccordion__area { width: 100%; height: auto; background: #fff; font-size: 12px; } @media screen and (max-width: 600px) { .tocAccordion__area { font-size: 12px; } } .tocAccordion__area .tocAccordion__inner { position: relative; } .tocAccordion__area .tocAccordion__inner.is-hide { height: 130px; overflow-y: hidden; } .tocAccordion__area .tocAccordion__inner.is-hide:after { content: ''; width: 100%; height: 50px !important; position: absolute; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 100%); } .tocAccordion__area .tocHead { font-size: 1.6em; font-weight: bold; text-align: center; } .tocAccordion__area .tocLists .item { font-size: 1em; padding: 1em; border-bottom: 1px solid #ddd; position: relative; } .tocAccordion__area .tocLists .item a:after { content: '↓'; width: 1em; height: 1em; color: #fff; font-weight: bold; font-size: 0.7em; padding: 0.05em 0.2em 0.35em; background: #666; border-radius: 10vw; display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .tocAccordion__area .tocLists .item a { color: #666; } .tocAccordion__area .tocLists .item a:hover { text-decoration: underline; } .tocAccordion__area .tocLists .subTocLists { padding-left: 1em; } .is-hidden { /*display: none;*/ visibility: hidden; } .allView__btn { width: 100%; height: auto; border: 0; background: none; color: #666; font-size: 0.7em; font-weight: normal; cursor: pointer; }
-
-
-
お待たせいたしました!
CSSの31行目のheightを変更してください!
数字を大きくすれば見える範囲が増えます!
例
【変更前】
.tocAccordion__area .tocAccordion__inner.is-hide { height: 130px; overflow-y: hidden; }
【変更後】
.tocAccordion__area .tocAccordion__inner.is-hide { height: 330px; overflow-y: hidden; }