WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ チャットでお問合せさせていただいて解決しなかったwidgetの修正についてです

  • チャットでお問合せさせていただいて解決しなかったwidgetの修正についてです

    トピックス by アドマ_リスアカ6 ユーザーランク 127 pt  2024年1月4日 17:45 184 PV

    新年あけましておめでとうございます。本年もよろしくお願い致します。
    今回のご相談内容は、「シンプルデザインの開閉する目次※要javascript(表)」の開閉を「1回だけ開く目次※要javascript」の様な開閉にしたいのですがコードの変更についてご教授いただけますでしょうか。

    具体的な内容としては、「1回だけ開く目次※要javascript」で全部みるボタンを押すと隠れているものが開閉され、全ての目次が見えるようになります。しかし、「シンプルデザインの開閉する目次※要javascript(表)」の方は、全て見えるか全て見えないかの二択なので「1回だけ開く目次※要javascript」と同様にできるようによろしくお願い致します。

    アドマ_リスアカ6   10 月前 2 人 · 8 コメント
  • 8 コメント
  • ベストアンサー

    widgetマスター

    モデレータ
    2024年1月5日 11:53

    お待たせいたしました!

    コードをお渡しいたします!

    よろしくお願いします!

    プレビュー:https://sb-draft-preview.squadbeyond.com/articles/BbDYfEGGYqOTeRtHwfiA/draft?token=f273babd62264000683819815f2b6705

    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;
    }
    • アドマ_リスアカ6

      メンバー
      2024年1月5日 12:00

      ご対応の方ありがとうございます。

      一点質問させてください!!!!🥺

      薄灰色の範囲(押せない)と黒字の範囲(押せる)の範囲を自分で調節したい場合どのようにコードを変更すれば良いでしょうか。

      具体的には、黒字の部を4行にしたい場合などです。

    • widgetマスター

      モデレータ
      2024年1月5日 12:00

      確認させていただきます🙌

    • アドマ_リスアカ6

      メンバー
      2024年1月5日 13:07

      ありがとうございます。

  • widgetマスター

    モデレータ
    2024年1月4日 18:01

    あけましておめでとうございます🐉

    今年もよろしくお願いいたします💫

    依頼内容承りました!

    またご連絡させていただきます!

    • アドマ_リスアカ6

      メンバー
      2024年1月4日 18:03

      ありがとうございます。よろしくお願いいたします。

  • widgetマスター

    モデレータ
    2024年1月5日 13:23

    お待たせいたしました!

    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;
    }

    プレビュー:https://sb-draft-preview.squadbeyond.com/articles/JXBURLSZYqkIVsYHwgow/draft?token=579af9140fc92bfd612df93988bf1ec4

  • アドマ_リスアカ6

    メンバー
    2024年1月5日 15:21

    迅速なご対応ありがとうございます。

    無事反映することができました。

    これからもよろしくお願い致します。