チャットでお問合せさせていただいて解決しなかったwidgetの修正についてです | コミュニティ

コミュニティ

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

トピックス by アドマ_リスアカ6 127 pt 2024年1月4日 17:45 194 PV
新年あけましておめでとうございます。本年もよろしくお願い致します。
今回のご相談内容は、「シンプルデザインの開閉する目次※要javascript(表)」の開閉を「1回だけ開く目次※要javascript」の様な開閉にしたいのですがコードの変更についてご教授いただけますでしょうか。

具体的な内容としては、「1回だけ開く目次※要javascript」で全部みるボタンを押すと隠れているものが開閉され、全ての目次が見えるようになります。しかし、「シンプルデザインの開閉する目次※要javascript(表)」の方は、全て見えるか全て見えないかの二択なので「1回だけ開く目次※要javascript」と同様にできるようによろしくお願い致します。
アドマ_リスアカ6 10 月, 3 数週間前 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

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

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

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